javascript - 在画布上旋转

Question

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

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

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

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

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