如何延迟for循环和运行 canvas操作?
How to delay a for loop and run canvas operation?
我想 运行 每 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-loop。
而是使用保存当前像素位置的全局变量。随着每个时间间隔增加该变量并将更改的 imageData 放入 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);
具有 setTimeout()
(或 requestAnimationFrame()
)且不使用全局变量(并且没有所有 "complicated" 数学)的版本:
const modifyPixel = (function(canvas) {
const context = canvas.getContext("2d");
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
return function(index = 0) {
if (index >= imageData.data.length) {
return;
}
imageData.data[index] = 255;
context.putImageData(imageData, 0, 0);
index += 4;
setTimeout(function() {
modifyPixel(index + 4);
}, 50);
};
}(document.querySelector("canvas")));
(function init() {
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "green";
context.fill();
}());
const modifyPixel = (function(canvas) {
const context = canvas.getContext("2d");
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
return function(index = 0) {
if (index >= imageData.data.length) {
return;
}
imageData.data[index] = 255;
context.putImageData(imageData, 0, 0);
index += 4;
setTimeout(function() {
modifyPixel(index + 4);
}, 50);
};
}(document.querySelector("canvas")));
modifyPixel();
<canvas style="width:200px; height:200px" width="50px" height="50px"></canvas>
我想 运行 每 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-loop。 而是使用保存当前像素位置的全局变量。随着每个时间间隔增加该变量并将更改的 imageData 放入 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);
具有 setTimeout()
(或 requestAnimationFrame()
)且不使用全局变量(并且没有所有 "complicated" 数学)的版本:
const modifyPixel = (function(canvas) {
const context = canvas.getContext("2d");
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
return function(index = 0) {
if (index >= imageData.data.length) {
return;
}
imageData.data[index] = 255;
context.putImageData(imageData, 0, 0);
index += 4;
setTimeout(function() {
modifyPixel(index + 4);
}, 50);
};
}(document.querySelector("canvas")));
(function init() {
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "green";
context.fill();
}());
const modifyPixel = (function(canvas) {
const context = canvas.getContext("2d");
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
return function(index = 0) {
if (index >= imageData.data.length) {
return;
}
imageData.data[index] = 255;
context.putImageData(imageData, 0, 0);
index += 4;
setTimeout(function() {
modifyPixel(index + 4);
}, 50);
};
}(document.querySelector("canvas")));
modifyPixel();
<canvas style="width:200px; height:200px" width="50px" height="50px"></canvas>