html5画布像素操作和转换答案

【问题标题】：html5 canvas pixel manipulation and transformationshtml5画布像素操作和转换
【发布时间】：2013-01-22 07:01:33
【问题描述】：

由于 putImageData 不受变换的影响，我如何操作图像中的像素然后对结果使用变换？例如，我想让图片中的红色更亮，然后将图片旋转 36 度。

使用 putImageData 似乎不是答案，因为我无法旋转它。我尝试放在一个新的画布上并使用 drawImage(newCanvas,0,0) 但根本没有绘制图像。

我被难住了。

【问题讨论】：

【解决方案1】：

使用新画布即可。您只需要先提取图像。这样的事情会起作用：

Image img = new Image();
img.src = newCanvas.toDataURL();
canvas.drawImage(img, x, y); // img is drawn with current transformation

调用toDataURL() 获取画布内容的快照；调用后newCanvas的内容变化不会出现在图片中。

【讨论】：