優化HTML5畫布中像素的設置

Question

HTML5 Canvas沒有明確設置單個像素的方法。

到目前為止我所知道的解決方案是：

• 使用getImageData和putImageData但由於putImageData性能較低，動畫效率太低

• 使用像rect或putImageData這樣的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 canvas）。 它和drawImage一樣快。

如果drawImage和putImageData方法都有類似的圖像，那么它們會重新繪制，它們的速度會相同。 您正在比較完全隨機像素的重新繪制速度，一遍又一遍地重新繪制空白。 如果您需要證明這一點，我可以舉個例子。