像素处理后旋转画布

Question

我遇到了以下问题：

我将图像加载到我的画布中并用它做一些事情（例如反转颜色或更多需要性能的东西）。之后，我仍然希望能够缩放和旋转画布（或其中的处理图像）。对于（如果我做对了）我需要重新绘制图像，好吧 - 然后操作就消失了。

所以：- 我可以以某种方式保存图像并在操作后重新绘制它（ctx.save（） 和 ctx.restore（） 在这种情况下似乎不起作用）- 或者我必须通过像素操作旋转和缩放（这不是问题，但如果画布转换可以做到这一点会很酷）

感谢您的帮助！

Answer 1

您可以使用两个画布元素实现所需的内容，在其中一个元素上进行绘制，然后在第二个画布上绘制该画布以应用旋转：

var canvas1 = document.createElement('canvas'),
    canvas2 = document.createElement('canvas'),
    ctx1 = canvas1.getContext('2d'),
    ctx2 = canvas2.getContext('2d');
/// use ctx1 to perform whatever manipulation you want, and then...
/// start
ctx2.save();
/// shift our "hotspot" to the center
ctx2.translate(canvas2.width / 2, canvas2.height / 2);
/// rotate 45 degrees clockwise.. obviously you can do what you want here
/// scale, fade, flip, stretch, rotate... whatever 
ctx2.rotate(Math.PI / 4);
/// draw your first canvas with it's manipulated image on to the second
/// along with it's rotation
ctx2.drawImage( canvas1, 0,0 );
/// all done
ctx2.restore();

我发现上述内容更容易使用，但是您也可以使用以下方法，它将获取/放回画布元素的当前图像数据：

ctx.getImageData();
ctx.putImageData();

您可以在此处了解如何使用这些：

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

http://www.w3schools.com/html5/canvas_getimagedata.asp