Javascript 如何设置从点到目标点的动画，然后闪烁绘制的路径？

我有一种情况，我需要在2D图片（如网络图）上绘制从位置到目标位置的路径，如路径，一旦路径建立，我需要闪烁高亮显示的红色路径

我尝试了以下未设置动画的方法，如何设置开始和结束动画，而不是静态绘制，如下所示：

$.tpt.prototype.setDraw = function() {
    var canvas = document.getElementById('maincanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(100,20);

    // line 1
    context.lineTo(200, 160);
    // quadratic curve
    context.quadraticCurveTo(0, 200, 250, 120);
    // bezier curve
    context.bezierCurveTo(290, -40, 300, 200, 400, 150);
    // line 2
    context.lineTo(500, 90);

    context.lineWidth = 1;
    context.strokeStyle = 'red';
    context.stroke();
};

---

为了沿着曲线设置动画，我会使用破折号数组，但有些人喜欢数学：-）-你是说这个吗？如果你是这个意思，那我怎么能和动画一起浏览绘图呢？如果它只能通过Javascript实现，那么它将便于共同浏览。不确定共同浏览是什么意思，以及它与您的问题有何关系，但是的，我正在考虑类似的东西，它使用与您提供的链接相同的技术，但用于canvas API。您现在需要找到的只是一种以编程方式计算路径长度的方法，这里已经有一些Q/a，但我没有时间为您找到它。@kaido…：-）为了沿着曲线设置动画，我会使用破折号数组，但有些人喜欢数学：-）-你是说这个吗？如果你是这个意思，那我怎么能和动画一起浏览绘图呢？如果它只能通过Javascript实现，那么它将便于共同浏览。不确定共同浏览是什么意思，以及它与您的问题有何关系，但是的，我正在考虑类似的东西，它使用与您提供的链接相同的技术，但用于canvas API。您现在需要找到的只是一种以编程方式计算路径长度的方法，这里已经有一些Q/a，但我没有时间为您找到它。@kaido…：-）