2

青い波をいくつか作成しようとしましたが、実行するとブラウザがフリーズします。キャンバスのサイズを 80 & 60 に縮小した場合にのみ機能します。

<canvas id="canvas" width="800" height="600"></canvas>

脚本：

var canvas=document.getElementById('canvas'), ctx = canvas.getContext('2d');
var imageData = ctx.createImageData(canvas.width, canvas.height);

for(var i=0; i<imageData.width; i++) {
    for(var j=0; j<imageData.height; j++) {
        imageData.data[((imageData.width * j) + i) * 4] = 0;
        imageData.data[((imageData.width * j) + i) * 4+1] = 0;
        imageData.data[((imageData.width * j) + i) * 4+2] = 127*Math.sin(i/100)+128;
        imageData.data[((imageData.width * j) + i) * 4+3] = 255;
        ctx.putImageData(imageData, 0, 0);
    }
}

私は何を間違っていますか？なぜそんなに遅いのですか？

4

3 に答える 3

3

主な速度低下は、反復ごとに画像を描画しているためです。

この行を移動

ctx.putImageData(imageData, 0, 0);

あなたのループの外。

于 2013-03-11T17:02:40.643 に答える
2

非常に高速なテストをチェックしてください: http://jsfiddle.net/powtac/t8JA2/8/ 

    imageData.data[((imageData.width * j) + i) * 4] = 0;
    imageData.data[((imageData.width * j) + i) * 4+1] = 0;
    imageData.data[((imageData.width * j) + i) * 4+2] = 127*Math.sin(i/100)+128;
    imageData.data[((imageData.width * j) + i) * 4+3] = 255;

次のように記述できます。

    tmp = ((imageData.width * j) + i) * 4;
    imageData.data[tmp] = 0;
    imageData.data[tmp + 1] = 0;
    imageData.data[tmp + 2] = 127*Math.sin(i/100)+128;
    imageData.data[tmp + 3] = 255;

また、重い割り当てをループの外に移動するという not_john のアイデアも含めました。

于 2013-03-11T16:52:22.067 に答える
1

遅い理由の 1 つは、特定の計算を重複して実行しているためです。

var value = (imageData.width * j) + i); // <--- cache this value

プロパティ ルックアップを保存する

for(var j=0, k=imageData.height; j<k; j++) {
于 2013-03-11T16:49:51.687 に答える