javascript - 像素操作后旋转 Canvas

Question

我遇到了以下问题:

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

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

感谢您的帮助!

Answer 1

您可以使用两个 Canvas 元素实现您想要的效果，在一个 Canvas 上绘制用于您的操作，然后在第二个 Canvas 上绘制该 Canvas 以应用旋转:

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();

我发现上面的方法更容易使用，但是你也可以使用下面的方法，它会抓取/放回 Canvas 元素的当前图像数据:

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