如何在HTML5中绘制一条具有与单位圆相匹配角度的lineTo？

Question

如果我有这个，

    var canvas = document.getElementById("my-canvas");  
    var ctx = canvas.getContext("2d");  

    ctx.fillStyle = '#f00';
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(150, 25);
    ctx.rotate(Math.PI*7/4);  //315 degrees
    ctx.lineTo(150,90);

    ctx.stroke();

它没有绘制线（ctx.lineTo(150,90);）的角度，我认为它是从第一行的末端到25,25到45度角的150,90。如果我使用 - Math.PI*7/4我看起来像45度角，但它指的是错误的方式。 Math.PI*5/4走错路或轮换。

我的问题是关于单位圈。我并不是真的需要它们，只要能够知道如何在需要时绘制它们。

Answer 1

画布以这种方式旋转：

Answer 2

考虑以下示例，没有y偏移：

由代码给出：

var canvas = document.getElementById("my-canvas");  
var ctx = canvas.getContext("2d");  

ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(25, 0);
ctx.lineTo(250, 0);
ctx.rotate(45*Math.PI/180);  //45 degrees
ctx.lineTo(150,0);
ctx.stroke();
ctx.beginPath();

ctx.moveTo(0,0);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(350,0); 
ctx.font = "30px Arial";
ctx.fillText("New x axis",100,50);
ctx.stroke();

红线是新的x轴，黑线与原点的距离为150。

现在用你的坐标覆盖相同的红线（并旋转45度，这样它就不会离开屏幕），我们得到了

黑线在确实（150,90）的点处结束，但是在新的坐标系处。 JSFiddle here

如果您希望两个线段之间的角度与rotate(...)中传递的角度完全相同，那么请继续绘制＆＃34;水平＆＃34;线条，但将原点转换为每个线段的末尾，因此您使用ctx.translate(<current point>)围绕此点而不是左上角进行旋转。例如：https://jsfiddle.net/Douma37/65z1p38z/（这取决于画布，但对您的代码的干扰最小）。

希望有所帮助！