Javascript 在画布上旋转绘图

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

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

这个想法很简单。在第一步我画一个矩形，在第二步我旋转我的画布并做我认为是一个快照（或创建我的旋转矩形的副本），在第三步我旋转我的画布回来（所以我的旋转矩形不能再旋转），在最后一步我添加一个新的对象到画布-旋转矩形的副本。但我得到的是：

然而，我希望得到这张照片：

我做错了什么？如何获得所需的结果？

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

请看这里：

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

如果您需要创建多个图像精灵，并且创建多个画布将无法完成，请考虑将您的精灵绘制为适当大小的临时画布，然后使用画布.toDATAURL

将临时画布的内容转换为图像。 这篇文章给出了一个很好的例子：

---

第一次旋转时，实际上是在绘制长方体。在

//3。向后旋转

旋转，但不使用它将其绘制到画布上。你画两次矩形。但是我想画一次，然后用getImageData克隆它。使用getImageData是一个严格的要求。问题是我只是用两个矩形简化了我的问题，但在现实世界中情况更糟——可能有一些彩色背景和不同的图形。我想要的是旋转此背景，从中创建一个块，然后在另一个坐标处绘制此块。如果这不是关于使用

.getImageData

的家庭作业，请继续您的作业。否则，您需要告诉您的雇主，有更简单、更快的方法来渲染克隆的旋转矩形。；-）@马克。1.事实并非如此。2.任务不是旋转矩形3。若你们阅读了我上面的评论，你们会发现，在现实世界中，我需要从任何背景中创建一个旋转块。在这个答案中包含一些代码示例会很有用。若这个代码能够解决我的任务=），那个么它会更有用。不过，我想现在我可以自己做了。