Question

我希望有两条90度角的线条。我想这样做，使垂直线向下移动到水平线。角度是枢轴点。所以角度应该减少到0我猜。 45将是中途。

动画期间线条的长度应相同。
动画应循环播放。它应该从90度角到 0度角和背部。

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

我想的另一种方式是改变Math.atan2。我不知道它从90度开始然后转到0并且反映了moveto参数我不知道如何把它放在一起。

我更愿意使用三角函数的解决方案，因为这是我试图擅长的方法

如果您可以附加斜边以获得额外的帮助，那么我可以看到角度会改变三角形的大小。那是我原来的问题。谢谢

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这可能会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

"/^([1-9]+[0-9]*):([1-9]+[0-9]*)$/"

动画三角形的角度

2 个答案: