javascript - 在 JavaScript Canvas 中沿直线移动一个点

Question

假设我有一条线的坐标(25,35 45,65, 30,85 - 这将是一条分为两部分的线)。我需要每帧以恒定距离沿该线移动一个点(汽车)。我该怎么做？

Answer 1

嘿，所以你的 2 条线的坐标为 (25,35) (45,65) (30,85)，你要移动的点将放置在这些坐标 (25, 35) 并且你希望它向第二个坐标 (45,65) 移动(第一条线段的末端)。

第一步是获取点将要移动的方向，方向是点位置与目标位置之间的 Angular 。要找到这个 Angular ，您可以使用 Math.atan2()，将 target position Y - the point position Y 作为第一个参数传入，作为第二个参数传入目标位置X - 点位置X.

var Point = {X: 25, Y: 35};
var Target = {X:45, Y:65};

var Angle = Math.atan2(Target.Y - Point.Y, Target.X - Point.X);

现在得到那个 Angular 正弦和余弦，正弦是沿Y轴移动的值，余弦是沿X轴移动的量。将正弦和余弦乘以每帧要移动的距离。

var Per_Frame_Distance = 2;
var Sin = Math.sin(Angle) * Per_Frame_Distance;
var Cos = Math.cos(Angle) * Per_Frame_Distance;

好的，现在剩下要做的就是设置重绘方法，在每次调用时将正弦添加到点的 Y 位置，将余弦添加到点的 X 位置。检查该点是否已到达目的地，然后执行相同的过程以移动到第二条线段的末端。