javascript for 循环中 canvas putImageData 函数的错误

Question

我在 HTML canvas 和运行上进行像素级操作时遇到了 putImageData() 函数的错误。这是我的代码：

var can = document.getElementById("canvasID");  
var ctx = can.getContext("2d");  
var picToAlter = document.getElementById("image");   
var pix = ctx.createImageData(1, 1);  
var colData = pix.data;  
colData[someNumber] = someValue;   
ctx.drawImage("image", 0, 0);  
for(let i=0;i<=can.width; i+10){  
  ctx.putImageData(pix, i, 0);  
}

当我尝试在我的浏览器 (Firefox) 中运行此代码时，无论我等待多长时间，页面都无法加载，并且最终询问我是否要停止加载过程。问题似乎出在我的 for 循环上，因为如果我运行代码的单个实例，它就可以工作。但是，当我将其置于循环中时，它又回到了不加载状态。即使我改用 while 循环也是如此。我知道 putImageData 可能会很慢，但我觉得我遗漏了一些明显使循环无限的东西，但我就是找不到它。

Answer 1

如果您尝试立即抓取图像数据（无需预加载），您可能会看到一片空白 canvas。在预加载图像后，您应该只运行您的代码。

picToAlter.addEventListener('load', yourDrawingMethod)

此外，您的 for 循环可能没有按照您的预期运行。你不想打 can.width 因为它实际上是越界的，因为它从零开始。此外，您的迭代语句实际上并未迭代。您需要使用赋值运算符，例如 i = i+10 或 i+=10。考虑到这些问题，你最终会得到这样的结果......

for(let i = 0; i < can.width; i+=10){
    // ...
}

javascript for 循环中 canvas putImageData 函数的错误

javascript bug with canvas putImageData function inside for-loop

html

javascript

for-loop

canvas

putimagedata