优化 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 方法具有相似的图像并重新绘制，则它们最终的速度相同。您正在将完全随机像素的重绘速度与一遍又一遍地重绘空白进行比较。如果您需要证明这一点，我可以举个例子。