我只是在学习如何使用 HTML5 画布元素。我已经成功地绘制了矩形、调用getImageData
、操作像素,然后putImageData
看到矩形改变颜色等。
现在我正在尝试将图像加载到我遇到障碍的画布中。在调用drawImage
画布的上下文之后,fillRect
只在没有绘制图像的区域绘制,就像它在图像后面绘制矩形一样,即使它被调用 after drawImage
。此外,putImageData
停止工作,即使在包含矩形的可见区域上,我的像素操作也不再发生。如果我用 注释掉该行drawImage
,它会再次起作用。
我想要做的是像处理矩形一样操作图像中的像素。有什么理由不这样做吗?
绘制图像代码:
var img = new Image();
img.onload = function () {
//comment out the following line, everything works, but no image on canvas
//if it's left in, the image sits over the rectangles, and the pixel
//manipulation does not occur
context.drawImage(img, 0, 0, width / 2, height / 2);
}
img.src = path;
绘制矩形代码:
for (var i = 0; i < amount; i++)
{
x = random(width - size);
y = random(height - size);
context.fillStyle = randomColor();
context.fillRect(x, y, size, size);
}
操作像素代码:
var imgd = context.getImageData(0, 0, width, height);
var pix = imgd.data;
//loop through and do stuff
context.putImageData(imgd, 0, 0);