3

我遇到以下问题：

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

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

谢谢您的帮助！

4

1 回答 1

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

于 2012-10-07T20:35:37.087 回答