使用“ImageData”数据数组设置动画会导致非常意外和类似故障的结果

我最近使用 ImageData 数据阵列;就是那个 ctx.getImageData() 和 ctx.putImageData() 方法,并对我自己说,“这可能是一个非常有效的方式来动画画布上的移动物体充满”。所以我把它和 requestAnimationFrame(callback) 声明,但那是事情变得奇怪的时候。我所能做的最好的描述就是说画布上最左边的一列像素在最右边的一列像素中被复制,这是基于你为画布指定的坐标 get put ctx 方法,这可能会产生奇怪的后果。

0, 0 像这样:

imageData = ctx.getImageData( 0, 0, cvs.width, cvs.height );

//  here I set the pixel colors according to their location
//  on the canvas using nested for loops to target the
//  the correct imageData array indexes.

ctx.putImageData( imageData, 0, 0 );

放 ImageData坐标来获得绘制的图像和画布边缘之间的一些空间,我改变了 得到

imageData = ctx.getImageData( 1, 1, cvs.width, cvs.height );

for ( var x = 0; x < cvs.width - 92; x++ ) {
    for ( var y = 0; y < cvs.height - 92; y++ ) {
        // array[ x + y * width ] = value / x; // or similar
    }
}

ctx.putImageData( imageData, 2, 2 );

漂亮!但错了。。。所以我把它复制了出来 codepen . 有人能帮我理解和克服这种行为吗?

注意:代码笔具有缩小的绘图区域。如果你改变主意 得到 得到 放 最有趣的行为是零。