优化 HTML5 画布中像素的设置

Question

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();

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

Answer 1

putImageData是你想要使用的（如果你计划在HTML5画布上）。 它和drawImage一样快.

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