Question

我尝试创建一些蓝色波浪，但是如果我运行它，浏览器就会释放。如果我将画布的尺寸减小到80＆amp; 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);
    }
}

我错了什么？为什么这么慢？

Answer 1

主要的减速是因为你在每次迭代时都在绘制图像。

移动此行

ctx.putImageData(imageData, 0, 0);

在你的循环之外。

Answer 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关于将繁重的任务移出循环的想法。

Answer 3

它缓慢的一个原因是因为你正在冗余地执行某些计算。

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

保存属性查找

for(var j=0, k=imageData.height; j<k; j++) {

为什么我的像素处理脚本如此缓慢？

3 个答案: