在画布上旋转绘图

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

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

虽然我希望得到这张照片：

我做错了什么，怎样才能得到理想的结果？

Answer 1

＆＃34; putImageData不受转换矩阵＆＃34;

的影响

见这里：putImageData() on rotated canvas work incorrect

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

How to rotate the existing content of HTML5 canvas?

如果您需要创建多个图像精灵，并且创建多个画布不会做，请考虑将精灵绘制到适当大小的临时画布，然后使用canvas.toDataUrl将临时画布的内容转换为图像

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

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