0

JavaScript cnavas でいくつかの画像アニメーションを作成しようとしているので、ピクセルを操作する必要がありますが、問題は、ピクセルの配列を歩くのに時間がかかり、コンテキストのネイティブ関数がはるかに高速であることです。

このテストはそれを示しています：

    <canvas width="600" height="400" id="canvas"></canvas>
<script type="text/javascript">
ctx = document.getElementById('canvas').getContext("2d");
// Test 1
var date1 = new Date();
ctx.fillRect(100, 100, 200, 200);
// Test 2
var date2 = new Date();
var imageData = ctx.getImageData(0, 0, 600, 400);
var i, j, p;
for(i = 100; i < 300; ++i)
    for(j = 100; j < 300; ++j) {
        p = (i * 600 + j) * 4;
        imageData.data[p] = 0;
        imageData.data[p + 1] = 0;
        imageData.data[p + 2] = 0;
        imageData.data[p + 3] = 255;
    }
ctx.putImageData(imageData, 0, 0);
// Test 3
var date3 = new Date();
var imageData = ctx.getImageData(100, 100, 200, 200);
var i, j, p;
for(i = 0; i < 200; ++i)
    for(j = 0; j < 200; ++j) {
        p = (i * 200 + j) * 4;
        imageData.data[p] = 0;
        imageData.data[p + 1] = 0;
        imageData.data[p + 2] = 0;
        imageData.data[p + 3] = 255;
    }
ctx.putImageData(imageData, 100, 100);
var date4 = new Date();

alert("fillRect: " + (date2.getTime() - date1.getTime()) + "\ngetImageData(full): " + (date3.getTime() - date2.getTime()) + "\ngetImageData(part): " + (date4.getTime() - date3.getTime()));
</script>

おおよその結果は、0、14、12 です。

なぜそれが起こるのですか？手動でピクセルを変更する最速の方法は何ですか?

4

1 に答える 1

1

ご覧ください: Typed Arrays を使用したキャンバス ピクセル操作の高速化

ここでは、自分でベンチマークを実行できます。

于 2012-04-09T04:31:41.480 に答える