javascript - 优化HTML5 Canvas 中的像素设置

HTML5 Canvas没有用于显式设置单个像素的方法。

我到目前为止所知道的解决方案是:

使用getImageData和putImageData，但是动画的效率太低
由于putImageData

的性能低下

使用像rect或putImageData这样的重对象来绘制单个像素，但是当要绘制很多像素时，性能似乎差很多。

我已经看到drawImage函数确实比putImageData更快
实际上，如果我们将putImageData替换为drawImage(new Image(w,h))，那确实非常快。
但是我不知道任何解决方案将图像放在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();

如果有人有提高性能的线索。

最佳答案

putImageData是您要使用的(如果您打算在html5 canvas上进行规划)。它和drawImage一样快。

如果drawImage和putImageData方法都具有重绘的相似图像，则它们最终的速度相同。您正在将完全随机像素的重绘速度与一遍又一遍的空白重绘进行比较。如果您需要证明，我可以举个例子。