Question

我正在玩HTML画布上的像素级操作，并遇到了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

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

picToAlter.addEventListener('load', yourDrawingMethod)

此外，您的for循环可能不会出现您的预期。你不想点can.width，因为它实际上是超出范围的，因为它从零开始。此外，您的迭代语句实际上并不是迭代。您需要使用i = i+10或i+=10等赋值运算符。考虑到这些问题，你最终会得到类似的东西......

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

for-loop

1 个答案: