javascript - 将一条线动画化到多个点

Question

使用画布，我试图为一条从一个点连续移动到另一个点的单行设置动画。（就像印第安纳琼斯电影中他从一个地方飞到另一个地方时的地图）。

我无法理解如何使这项工作。我当前的代码制作了一个实心三角形。整洁，但我想看到 vee 形状自己绘制。有什么建议么？

谢谢

这是我的代码

Answer 1

工作演示

这是我整理的一个快速方法。它无论如何都不完美。它使用矩形而不是线条，但如果您想加快绘制速度（或者只是更改超时方法的更新时间），可以轻松地将其更改为线条。只需将起始 x/y 更改为您希望它开始的位置，然后将一个点数组传递给函数，它会在每个点上画线，直到用完为止。

var canvas = document.getElementById("canvasWindow");
var c = canvas.getContext("2d");

var curPoint = {
    x : 0,
    y : 0,
    index : 0   
}

var points = [{x:10, y:20}, {x:100, y:100}, {x:50, y:150}, {x:0,y:0}];
    
function toPoints(points){
    var targetPoint = points[curPoint.index];
    var tx = targetPoint.x - curPoint.x,
        ty = targetPoint.y - curPoint.y,
        dist = Math.sqrt(tx*tx+ty*ty),
        rad = Math.atan2(ty,tx),
        angle = rad/Math.PI * 180;;
     
        velX = (tx/dist)*1;
        velY = (ty/dist)*1;

    curPoint.x += velX;
    curPoint.y += velY;

    if(dist < 2){
        curPoint.index++;
    }

    c.fillRect(curPoint.x, curPoint.y, 1, 1);
    if(curPoint.index < points.length){
        setTimeout(function(){toPoints(points)}, 10);
    }
}

toPoints(points);

Answer 2

我不确定确切的目标，但c.beginPath();如果你只想画线而不是填充三角形，你可能会错过一两个。

（对不起，我不知道这部电影……）