Question

我遇到了以下问题：

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

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

感谢您的帮助！

Answer 1

你可以使用两个画布元素实现你想要的效果，为你的maniuplation绘制一个画布元素，然后在第二个画布上绘制画布以应用旋转：

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

像素操作后旋转画布

1 个答案: