4

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

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

4

1 回答 1

0

putImageData是您想要使用的，（如果您计划使用 html5 画布）。它和 一样快drawImage。

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

于 2013-01-24T23:58:08.250 回答