标签: html5-canvas
隐藏/禁用工具提示chart.js
我正在尝试使用chart.js隐藏折线图中的工具提示.
我试过这段代码,但是他们从不隐瞒.
Chart.defaults.global.tooltipenabled = false;
您可以在此处查看图表中的所有代码:
推荐指数
解决办法
查看次数
使用Web Workers使用本机canvas函数进行绘制
可以将CanvasPixelArray获取的via 发送getImageData到worker脚本,让worker脚本操纵其后台线程中的像素,最后将操作的像素阵列发回.
但是,我使用的是原生画布绘图功能drawImage.这些drawImage调用当前正在阻止UI线程.这会导致按钮重绘速度慢,单击按钮时会出现明显的延迟,这只是为了说明一些缺点.(编辑:现在可以使用ctx.imageSmoothingEnabled = false至少在带有webkit前缀的WebKit上完成一项小改进.)
我想使用Web Workers将绘图从主线程移动到后台线程中.但是,我似乎无法向工作人员发送画布和上下文.
注意:像往常一样,后台线程(包括worker)无法操纵DOM.如果后台线程采取的操作需要导致对DOM的更改,则应将消息发送回其创建者以执行该工作.
但是我想按原样离开DOM; 我只是想在canvas元素上绘制东西.这是可能的,还是Web Workers真的只允许计算而不是绘制？
(或者也许可以使用类似drawImage操作CanvasPixelArray而不是在画布上绘制的函数？)
推荐指数
解决办法
查看次数
画布图像遮罩/重叠
在我的项目中,我必须使用画布在另一个相同尺寸和图案图像上实现一个不同的彩色图像,并且图像不是圆形或矩形形状.所有这些都是波浪形状,它将应用于单个主背景图像,以在每个onclick功能上显示多个图形.
重叠图像应更改为另一种选定颜色.我的问题是否有任何使用画布的方法我们可以改变画布绘制的图像颜色,或者我们需要总是使用不同的图像并应用CSS/jQuery.
我读到了关于画布图像遮罩和重叠的内容.但不能理解我的图像,因为它不是方形或圆形,那么首先是我如何在单个图像上绘制多个波形.我不知道我搜索但没有找到完美的解决方案.
我需要的是在画布上绘制一个波形图像并从点击功能中更改其颜色,并设置另一个带背景图像的div,还有两个画布将重叠.这可能吗？
(这意味着:此功能用于在汽车上创建或设置多个图形,因为每个图形图像需要在画布中设置,而另一个图形需要在div和第一个画布上重叠)
推荐指数
解决办法
查看次数
canvas getContext("2d")返回null
我尝试了几种不同的方法,但我仍然遇到同样的错误.我之前已将图像加载到画布,但自从我几天前更新了Safari之后,我就遇到了错误.
我会发布我目前所拥有的内容,但我已尝试使用jQuery,html的onLoad属性等.
var cvs, ctx, img;
function init() {
cvs = document.getElementById("profilecanvas");
ctx = cvs.getContext("2d"); /* Error in getContext("2d") */
img = document.getElementById("profileImg");
drawImg();
}
function drawImg() {
ctx.drawImage(img, 0, 0);
}
window.onload = init();
ID正确并且对应于适当的canvas和img标记.但是,我一直在努力TypeError: 'null' is not an object (evaluating 'cvs.getContext'),似乎没有进一步.我确定这是一些ID10T错误,但我希望有人能给我一个线索,告诉我这是什么原因造成的？谢谢.
编辑:好的,所以这似乎<body onload="init()">现在使用.然而,它只显示偶尔,如果我尝试运行init()过的$(document).ready()或document.onload我仍然没有运气,并收到错误.有什么想法吗？
推荐指数
解决办法
查看次数
奇怪的HTML5 Canvas drawImage行为
我正在编写一些使用HTML5画布的代码.一般来说效果很好,但现在我发现了一种非常奇怪的行为.奇怪的是,它在不同的浏览器上是一致的,所以必须是我理解错误的东西......尽管文档似乎正好说明了我在做什么.这是代码(它是一个对象方法):
MyCanvas.prototype.getElement = function() {
var innerHtml = "<div></div>";
var elem = jQuery(innerHtml, {
'id' : this.viewId
});
var canvas = jQuery("<canvas/>", {
'id' : this.viewId + "canvas",
'width' : this.width,
'height' : this.height
});
var w = this.width;
var h = this.height;
jQuery(elem).append(canvas);
var imgElem = new Image();
imgElem.src = this.maskImage;
imgElem.onload = function() {
var ctx = canvas[0].getContext('2d');
ctx.drawImage(this, 0, 0, w, h);
};
return elem;
};
在此之后,我将再次使用jQuery将此元素附加到已经在页面中的Div(这是空白).结果将是图像过度伸展,就像宽度的十倍......这很奇怪,因为对于我对drawImage的理解,它应该使用w和h值来缩放图像,并且假设w和h是画布的大小,应该很合适.
我究竟做错了什么？是因为我绘制了渲染的DOM树吗？
推荐指数
解决办法
查看次数
画布旋转星场
我正在采用以下方法在屏幕上设置星形场的动画,但我仍然坚持下一部分.
JS
var c = document.getElementById('stars'),
ctx = c.getContext("2d"),
t = 0; // time
c.width = 300;
c.height = 300;
var w = c.width,
h = c.height,
z = c.height,
v = Math.PI; // angle of vision
(function animate() {
Math.seedrandom('bg');
ctx.globalAlpha = 1;
for (var i = 0; i <= 100; i++) {
var x = Math.floor(Math.random() * w), // pos x
y = Math.floor(Math.random() * h), // pos y
r = Math.random()*2 + 1, // radius
a = …推荐指数
解决办法
查看次数
图表区域背景颜色chartjs
我有图表js的问题,我想像上面的图像着色图表区域
我试图从charJs Docs中找到配置,但没有匹配.它是否可以改变图表区域的背景颜色？如果可能,任何人都可以帮助我
HTML
<canvas id="barChart" width="600" height="300"></canvas>
使用Javascript
var ctx = document.getElementById("barChart");
var barChart = new Chart(ctx,{
type: 'bar',
data: {
labels:["Label1","Label2","Label3","Label4"],
borderColor : "#fffff",
datasets: [
{
data: ["2","3","1","4"],
borderColor : "#fff",
borderWidth : "3",
hoverBorderColor : "#000",
backgroundColor: [
"#f38b4a",
"#56d798",
"#ff8397",
"#6970d5"
],
hoverBackgroundColor: [
"#f38b4a",
"#56d798",
"#ff8397",
"#6970d5"
]
}]
},
options: {
scales: {
yAxes: [{
ticks:{
min : 0,
stepSize : 1,
fontColor : "#000",
fontSize : 14
},
gridLines:{
color: …推荐指数
解决办法
查看次数
如何在Angular2中使用画布？
在javascript中使用canvas的常见方法是:
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
但是在Angular2中我无法获取HTMLCanvasElement对象,var"canvas"只获取Angular2中的HTMLElement.那么如何在Angular2中使用canvas？此外,如何使用Angular2中的第三方javascript使用TypeScript语言？
推荐指数
解决办法
查看次数
HTML5 Canvas:更好地重新绘制对象或使用位图？
我的项目有一个HTML5 Canvas,在其上重复绘制图形对象.这些物体迅速变化.绘制它们需要时间.我怎样才能让它更快？
对象不是太复杂,但包含弧形,渐变,多边形等内容.
对象的外观取决于大约10个属性,每个属性具有大约10个值中的一个.这意味着只有大约100种不同的外观而不是对象可以拥有的外观.这就是为什么我只考虑绘制每个外观一次然后缓存位图以便重复使用.
一切都必须在客户端工作(即我不能使用现成的图像)
- 使用HTML5 Canvas的最佳方法是什么？
- 它是一个好主意还是使用位图的开销大于每次重新绘制对象的开销？
推荐指数
解决办法
查看次数
使用Data URI快速更新图像会导致缓存,内存泄漏
我有一个网页,可以快速从服务器流式传输JSON并显示其中的一些内容,大约10次/秒.一部分是base64编码的PNG图像.我发现了几种不同的显示图像的方法,但是所有这些方法都会导致无限的内存使用.它在几分钟内从50mb上升到2gb.适用于Chrome,Safari和Firefox.没试过IE.
我首先通过查看Activity Monitor.app发现了内存使用情况 - Google Chrome渲染器进程不断地占用内存.然后,我看着Chrome的资源检查器(View> Developer> Developer Tools,Resources),我看到它被缓存的图像.每次我更改img src,或创建一个新的Image()并设置它src,Chrome缓存它.我只能想象其他浏览器也在做同样的事情.
有没有办法控制这个缓存？我可以把它关掉,或做鬼鬼祟祟的事情,这样就不会发生吗？
编辑:我希望能够在Safari/Mobile Safari中使用该技术.此外,如果有人有任何想法,我会对其他快速刷新图像的方法持开放态度.
这是我尝试过的方法.每个驻留在一个在AJAX完成时调用的函数.
方法1 - 直接src在img标记上设置属性
快速.显示得很好.泄漏就像疯了似的.
$('#placeholder_img').attr('src', 'data:image/png;base64,' + imgString);
方法2 - img用a 替换canvas,并使用drawImage
显示正常,但仍然泄漏.
var canvas = document.getElementById("placeholder_canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "data:image/png;base64," + imgString;
方法3 - 转换为二进制并替换canvas内容
我在这里做错了 - …
推荐指数
解决办法
查看次数
标签 统计
html5-canvas ×10
javascript ×8
canvas ×4
html5 ×4
chart.js ×2
drawimage ×2
angular ×1
composition ×1
data-uri ×1
game-physics ×1
graphics ×1
jquery ×1
memory-leaks ×1
scaling ×1
trigonometry ×1
typescript ×1
web-worker ×1