动画三角形的角度答案

【问题标题】：animating an angle of a triangle动画三角形的角度
【发布时间】：2015-12-17 14:18:42
【问题描述】：

我希望有两条线可以形成 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)
}

&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;

【问题讨论】：

标签： javascript math trigonometry angle

【解决方案1】：

这可能会有所帮助。

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

}

&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

要获得像 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++;

【讨论】：