HTML5 Canvas没有明确设置单个像素的方法。
目前我知道的解决方法是：
使用
getImageData和putImageData，但由于putImageData的性能较低，因此效率在动画中太低。使用重型对象如
rect或putImageData来绘制单个像素，但当需要绘制大量像素时，性能似乎更差。
我看到drawImage函数比putImageData快得多，确实，如果我们用drawImage（new Image(w，h))替换putImageData，它真的很快。
然而，我不知道任何可以快速设置像素的图像作为drawImage参数的解决方案。
这里是一个缓慢的代码示例
HTML：
<canvas id="graph1" width="1900" height="1000"></canvas>
Javascript:
var canvas=document.getElementById("graph1"),
ctx=canvas.getContext("2d"),
imageData,
data,
w=canvas.width,
loop=0,
t=Date.now();
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function animate() {
imageData=ctx.createImageData(w, canvas.height);
data=imageData.data;
for(i=0;i<30000;i++) { // Loop fast enough
x=Math.round(w*Math.random());
y=Math.round(canvas.height*Math.random());
data[((w * y) + x) * 4]=255;
data[((w * y) + x) * 4+1]=0;
data[((w * y) + x) * 4+2]=0;
data[((w * y) + x) * 4+3]=255;
}
ctx.putImageData(imageData, 0, 0); //Slow
//ctx.drawImage(new Image(canvas.width, canvas.height),0,0);// Would be about 4x faster even if ImageData would be also blank
requestAnimFrame(function() {
loop++;
if(loop<100)
animate();
else
alert('finish:'+(Date.now()-t));
});
}
animate();
如果有人能提供改善性能的技巧。