在画布上旋转答案

【问题标题】：Rotation on canvas在画布上旋转
【发布时间】：2011-08-30 11:26:10
【问题描述】：

我正在画布上绘制一些形状，但旋转让我感到害怕。从教程中我发现由于我愚蠢的脑袋或它们没有显示交互式转换，或两者兼而有之，找不到解决方案。

我编写了使用mousedown-mousemove-mouseup 事件绘制一些形状的代码，但我想在mousemove 点打开时旋转...(x1, y1) - 起点和(x2, y2)终点。请免费升级以下代码：

context.strokeRect(x1, y1, x2-x1, y2-y1);

那么在按住按钮的同时，我可以为这些矩形写些什么来跟随点(x2, y2)？

【问题讨论】：

这样吗？ code.google.com/p/jqueryrotate/wiki/Examples
你的问题不是很清楚。你到底想要什么？旋转已经存在的矩形？创建一个新的矩形并旋转它？ strokeRect 的 x1/y1 和 x2/y2 是 mose 的移动吗？
"X1" 是 "mousedown" 并且 x2 = ev.layerX;鼠标移动点。通过在空白画布上移动单击的鼠标来绘制矩形对我来说很容易，并且在按住单击并移动鼠标的同时，正如您在代码中看到的那样，矩形按比例拉伸，因此在 mouseup 上它保持形状，就像在 mouseup 事件上一样。但我想，在按住鼠标按钮并旋转圆弧原点的同时，矩形也旋转圆弧原点（x1，y1）。我试着让自己清楚。我希望这是可以理解的，谢谢你的帮助。
第二次点击应该发生旋转？因为否则，我看不清楚它应该达到的效果。鼠标移动时位于鼠标下方的点始终是矩形的一角吗？
旋转必须在其他一些语句定义的相同函数中，因为当我释放鼠标按钮时，循环结束，矩形被绘制。当然，我可以在“mouseup”上旋转，但是在绘制循环工作时它不会可见，并且旋转将应用于“盲点”。 ....当然 (x1,y1) 和 (x2,y2) 位于矩形的对角线，如果它对您有任何意义的话。

标签： javascript rotation html5-canvas coordinate-transformation

【解决方案1】：

我找到了解决方案，按照代码：

var xd = x2-x1,
yd = y2-y1;
var theta = Math.atan2(yd, xd); 
var deg = theta*180/Math.PI;
var xyd = Math.sqrt((xd*xd)+(yd*yd));


context.lineWidth = 1;
context.lineCap = "square";
context.strokeStyle = "#856020";
context.save();
context.translate(x1,y1);
context.rotate(theta);
context.strokeRect(0,0,xyd,yd);
context.restore();

【讨论】：