我想每 x 秒运行一次循环迭代。
每次迭代都会更改像素值并将更改后的图像绘制到 Canvas 上。
到目前为止我有这个:
for(let i=0;i<width;i++){ //Rows
for(o=i*(width*4);o<i*(width*4)+(width*4);o+=4){//pixels in current row
imgData.data[o] = 255
}
ctx.putImageData(imgData, xPos, yPos);
}
这成功地将图像中的所有像素更改为 255 红色。然而,这一切都是同时发生的。我希望这种情况每 x 秒发生一个像素。
有什么指导吗?
最佳答案
如果您希望这种情况每秒发生一个像素,则根本不应该使用外部 for 循环。 相反,使用保存当前像素位置的全局变量。每个时间间隔都会增加该变量并将更改后的图像数据放入 Canvas 。
类似于:
var originalWidth = width;
var currentPixel = 0;
function update() {
for (o = currentPixel * (originalWidth * 4); o < currentPixel * (originalWidth * 4) + (originalWidth * 4); o += 4) {
imgData.data[o] = 255;
}
ctx.putImageData(imgData, xPos, yPos);
if (currentPixel + 1 < originalWidth) {
currentPixel++
} else {
clearInterval(intervalId);
}
}
var intervalId = setInterval(update, 1000);
关于javascript - 如何延迟 for 循环并运行 Canvas 操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56200916/