Javascript 在画布上创建线条动画

我是个油画新手。我想画PV弦模型和电子流向标签的方向

这就是我想要实现的，从以下方向重新绘制线条：

如何初始设置动画位置，以及是否需要通过setTimeout进行更新

以下是我迄今为止所做的尝试：

var canvas=document.getElementByIdmyCanvas； var ctx=canvas.getContext2d； 如果canvas.getContext{ var ctx=canvas.getContext'2d'； //这里是绘图代码 /*第一排*/ ctx.fillStyle=RGB2150224，1； ctx.fillRect50,50,50,50； ctx.fillStyle=RGB2150224，1； ctx.110,50,50,50； ctx.fillStyle=rgb188,12,50,1； ctx.170,50,50,50； ctx.fillStyle=RGB2150224，1； ctx.230,50,50,50； ctx.fillStyle=RGB2150224，1； ctx.290,50,50,50； /*第二排*/ ctx.fillStyle=RGB0106160，1； ctx.50、150、50、50； ctx.fillStyle=RGB0106160，1； ctx.110、150、50、50； ctx.fillStyle=RGB0106160，1； ctx.170、150、50、50； ctx.fillStyle=RGB0106160，1； ctx.230、150、50、50； ctx.fillStyle=RGB0106160，1； ctx.290、150、50、50； /*路径*/ ctx.beginPath； ctx.lineWidth=3； ctx.strokeStyle=RGB34177,76,1； ctx.moveTo0，75； ctx.lineTo400,75； ctx.stroke； ctx.beginPath； ctx.线宽=10； ctx.strokeStyle=RGB34177,76,1； ctx.moveTo400，75； ctx.lineto400175； ctx.stroke； ctx.beginPath； ctx.lineWidth=3； ctx.strokeStyle=RGB34177,76,1； ctx.moveto0175； ctx.lineto400175； ctx.stroke； }否则{ //此处显示不支持的代码 } /*帆布{ 边框：1px实心D3； } */

---

您的浏览器不支持HTML5画布标记。有很多方法可以设置动画；以下是我的方法摘录；看见 完整代码：

var lerp = (a, b, t) => a + t * (b - a);
var speed = 0.01;
var time = 0;
var visited = [];
var points = [
  {
    from: { x: 0, y: 75 },
    to: { x: 395, y: 75 }
  },
  {
    from: { x: 395, y: 75 },
    to: { x: 395, y: 175 }
  },
  {
    from: { x: 395, y: 175 },
    to: { x: 0, y: 175 }
  }
];

/* Paths */
ctx.lineWidth = 3;
ctx.strokeStyle = "rgb(34, 177, 76, 1)";

(function update() {
  if (points.length) {
    visited.push({
        x: lerp(points[0].from.x, points[0].to.x, time),
        y: lerp(points[0].from.y, points[0].to.y, time)
    });

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBoxes(ctx);
    ctx.beginPath();
    ctx.moveTo(visited[0].x, visited[0].y)
    visited.forEach(e => ctx.lineTo(e.x, e.y));
    ctx.stroke();

    time += speed;

    if (time >= 1) {
        time = 0;
        points.shift();
    }

    requestAnimationFrame(update);
  }
})();

其思想是保持所有转折点的数据结构，然后沿着路径，沿着路径画一条线。如果您喜欢更现代的动画，请使用函数而不是lerp；放松通常更容易实现，并可能导致删除一些代码，例如，不需要跟踪起点和时间

---

最后一个小提示：您的原始代码在画布的右边缘截断了线条，因此我冒昧地使用395而不是400作为绘图宽度。

我不清楚您想要实现什么。您想沿着绿色条的路径绘制动画红色箭头吗？@ggorlen我想在当前的ctx.beginPath上重新绘制动画路径。因此，您想让三条绿色线在开始时显示为未绘制，然后从左上角开始逐渐绘制，先到右上角，再到右下角，然后在几秒钟的时间里到左下角？没有红色箭头吗？@ggorlen是的，这正是我想要的。