0

我在 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可能很慢，但我觉得我错过了一些明显的使循环无限的东西，但我就是找不到它。

4

1 回答 1

0

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

picToAlter.addEventListener('load', yourDrawingMethod)

此外，您的 for 循环可能不会像您预期的那样运行。您不想击球can.width，因为它实际上会超出范围，因为它从零开始。此外，您的迭代语句实际上并没有迭代。您需要使用赋值运算符，例如i = i+10or i+=10。考虑到这些问题，你最终会得到这样的东西......

for(let i = 0; i < can.width; i+=10){
    // ...
}
于 2017-12-16T20:38:15.953 回答