将线条设置为多个点的动画

Question

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

我无法理解如何使这项工作。我当前的代码是一个填充三角形。整洁，但我希望看到V形的形状。有什么建议吗？

由于

Here is my code

Answer 1

Working Demo

这是我放在一起的快速方法。它无论如何都不完美。它使用rects而不是行，但如果你想加快它绘制的速度（或者只是改变超时方法的更新时间），它可以很容易地改为行。只需将起始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();。

（抱歉，我不知道这部电影......）