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

查看：Faster Canvas Pixel Manipulation with Typed Arrays

here你可以自己运行基准测试。

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

1 个答案: