尝试以已知角度在 canvas 单位圆中显示一条线

Question

如果我知道角度，比如 30 度，我想在象限中显示一条具有该角度的线。我试过：

let angle = 30;
ctx.moveTo(canvas.width/2, canvas.height/2); //Center point
ctx.lineTo(Math.cos(angle), Math.sin(angle)); // x and y?;  I need the distance?

听着，Trig 对我来说真的是一个新概念，我将不胜感激任何建议。这是我的 canvas...

let canvas = document.getElementById("myCanvas"); // width and height are 400
let ctx = canvas.getContext("2d");

ctx.beginPath();

// The Vertical line to create quadrants
ctx.moveTo((canvas.width/2),0);
ctx.lineTo(canvas.width/2, canvas.height);


// The Horizontal Line to create quadrants
ctx.moveTo(0, canvas.height/2);
ctx.lineTo((canvas.width), canvas.height/2);

// The circle contained in my canvas
ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2 * Math.PI);


ctx.stroke(); // Make line visible, otherwise for shapes use stroke

// Radians to degrees
function toDegrees(radians){
    return radians * Math.PI/180
}

Answer 1

首先，我发现先转换弧度再画线比较容易。请记住，单位圆坐标的 x 和 y 值范围从 -1 到 1。我们正在按比例放大，因此要获得 canvas 上的实际位置，我们需要做两件事：

1) 乘以单位圆坐标*圆心坐标。 2) 将中心坐标添加到该值

我使用了红色笔触风格，这样你可以看得更清楚一点：

完整代码

      let canvas = document.getElementById('myCanvas')
      let ctx = canvas.getContext('2d')

      canvas.width = 512;
      canvas.height = 512;

      ctx.beginPath();

      // The Vertical line to create quadrants
      ctx.moveTo((canvas.width/2),0);
      ctx.lineTo(canvas.width/2, canvas.height);


      // The Horizontal Line to create quadrants
      ctx.moveTo(0, canvas.height/2);
      ctx.lineTo((canvas.width), canvas.height/2);

      // The circle contained in my canvas
      ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2 * Math.PI);


      ctx.stroke(); // Make line visible, otherwise for shapes use stroke

      //Degrees to radians
      function toRadians(degrees) {
          return (degrees * Math.PI)/180
      }

      //Angle in degrees
      let angle = 315;
      //Angle in Radians
      let angleToRad = toRadians(angle)
      //Changes the color to red
      ctx.strokeStyle = 'red'
      //Starts a new line
      ctx.beginPath();
      ctx.moveTo(canvas.width/2, canvas.height/2); //Center point
      ctx.lineTo((canvas.width/2) + (Math.cos(angleToRad) * canvas.height / 2), (canvas.height/2) - (Math.sin(angleToRad) * canvas.height / 2)); 
      ctx.stroke();

只是我添加的内容：

 //Degrees to radians
      function toRadians(degrees) {
          return (degrees * Math.PI)/180
      }

      //Angle in degrees
      let angle = 315;
      //Angle in Radians
      let angleToRad = toRadians(angle)
      //Changes the color to red
      ctx.strokeStyle = 'red'
      //Starts a new line
      ctx.beginPath();
      ctx.moveTo(canvas.width/2, canvas.height/2); //Center point
      ctx.lineTo((canvas.width/2) + (Math.cos(angleToRad) * canvas.height / 2), (canvas.height/2) - (Math.sin(angleToRad) * canvas.height / 2)); 
      ctx.stroke();

尝试以已知角度在 canvas 单位圆中显示一条线

Trying to display a line in canvas unit circle with a known angle

javascript

trigonometry

canvas