4

HTML5 Canvas には、単一のピクセルを明示的に設定する方法がありません。

私がこれまでに知っている解決策は次のとおりです。

  • を使用getImageDataしますputImageDataが、パフォーマンスが低いため、アニメーションには効率が低すぎますputImageData

  • rectまたは重いオブジェクトを使用putImageDataして単一のピクセルを描画しますが、描画するピクセルが多いとパフォーマンスが大幅に低下します。

このdrawImage関数は よりも実際に高速であることがわかりました。putImageData 実際に で置き換えると、非常に高速です。ただし、ピクセルごとにすばやく設定できる引数に画像を配置する解決策はわかりません。putImageDatadrawImage(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 に答える