动画三角形的角度

Question

希望我有两条成 90 度角的线。我想让垂直线向下移动到水平线。角度是枢轴点。所以我猜角度应该减小到0。 45 将是一半。

动画中线条的长度应该相同。
动画应该循环播放。它应该从 90 度角到 0度角和后退。

我想解决这个问题的一种方法是更改 context.moveTo(50,50) 参数编号，以便在动画期间应在新坐标处开始绘制线条。我在保持线条与水平线大小相同时遇到了问题。

我考虑的另一种方法是更改 Math.atan2。我不知道它从 90 度开始然后转到 0 并反映 moveto 参数我不知道如何将它们放在一起。

我更愿意使用三角学的解决方案，因为这是我想要擅长的

如果你能附上斜边，我可以看到角度改变三角形的大小，那会很棒。那是我原来的问题。谢谢

window.onload = function(){
 var canvas =document.getElementById("canvas");
 var context = canvas.getContext("2d");
 var length = 50

 context.beginPath();
 context.moveTo(50,50)
 context.lineTo(50,200);
 context.stroke();
 context.closePath();

 context.beginPath();
 context.moveTo(50, 200);
 context.lineTo(200, 200)
 context.stroke();
 context.closePath();

 var p1 = {
  x: 50,
  y : 50
 }
 var p2 = {
  x: 50,
  y: 200
 }

 var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
 console.log(angleDeg)
}

<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

要获得像 90-45-0-45-90-45... 这样的角度序列（以度为单位），您可以使用这个简单的算法（伪代码）：

i = 0
while (drawingNeeded) do
    angle = Math.Abs(90 - (i % 180)) *  Math.PI / 180;
    endPoint.x = centerPoint.x + lineLength * Math.Cos(angle);
    endPoint.y = centerPoint.y + lineLength * Math.Sin(angle);
    //redraw canvas, draw static objects
    drawLine(centerPoint, endPoint);
    i++;

Answer 2

这可能会有所帮助。

window.onload = function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var length = 150;
  var angle = 270;
  var maxAngle = 360;
  var minAngle = 270;
  var direction = 0;
  var p1 = {
    x: 50,
    y: 200
  };
  var p2 = {
    x: 200,
    y: 200
  };
  context.fillStyle = "rgba( 255, 0, 0, 0.5)";

  function draw() {
    context.clearRect(0, 0, 400, 400);
    context.beginPath();
    context.moveTo(p1.x, p1.y);
    context.lineTo(p2.x, p2.y)


    if (angle >= maxAngle) {
      direction = 1;
    } else if (angle <= minAngle) {
      direction = 0;
    }

    if (direction == 0) {
      angle++;
    } else {
      angle--;
    }

    var x = p1.x + length * Math.cos(angle * Math.PI / 180);
    var y = p1.y + length * Math.sin(angle * Math.PI / 180);

    context.moveTo(p1.x, p1.y);
    context.lineTo(x, y);

    context.lineTo(p2.x, p2.y);

    context.stroke();
    context.fill()
    context.closePath();
  }

  setInterval(draw, 50);

}

<canvas id="canvas" width="400" height="400"></canvas>

动画三角形的角度

animating an angle of a triangle

javascript

math

trigonometry

angle