如何在画布中优化像素编辑

Question

我尝试在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。

为什么会这样？手动更改像素的最快方法是什么？

Answer 1

查看： 使用类型化数组更快地操作画布像素

在这里，您可以自己运行基准测试。