javascript - 在 Canvas 上旋转绘图

Question

我有一个简单的任务 - 我需要绘制一个矩形，旋转并复制它并克隆它的旋转版本。我试着这样做:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//1. rotate canvas
ctx.rotate(-30 * Math.PI / 180);
ctx.rect(10, 60, 80, 40);
ctx.stroke(); 

//2. copy rotated rectangle
var img = ctx.getImageData(0, 0, 140, 140);

//3. rotate back
ctx.rotate(30 * Math.PI / 180);

//4. draw rotated version of the rectangle
ctx.putImageData(img, 80, 100);

这个想法很简单。第一步我画一个矩形，第二步我旋转我的 Canvas 并做我认为是快照(或创建我旋转的矩形的副本)，在第三步我旋转我的 Canvas (所以我旋转的矩形必须不再旋转)并在最后一步向 Canvas 添加一个新对象 - 旋转矩形的副本。但这就是我得到的:

而我希望得到这张照片:

我哪里做错了，我怎样才能得到想要的结果？

Answer 1

“putImageData不受变换矩阵的影响”

参见此处:putImageData() on rotated canvas work incorrect

相反，如果您希望将复杂的图像复制到内存中，然后以不同的 Angular 在屏幕上重复绘制，您可以考虑使用临时 Canvas 。这篇文章给出了一个很好的例子:

How to rotate the existing content of HTML5 canvas?

如果您需要创建多个图像 Sprite ，而创建多个 Canvas 不可行，请考虑将您的 Sprite 绘制到适当大小的临时 Canvas 上，然后使用 canvas.toDataUrl 将临时 Canvas 的内容转换为图像

帖子给出了一个很好的例子:

https://davidwalsh.name/convert-canvas-image