使用画布

Question

我正在尝试使用画布为路径的一部分设置动画。基本上我有一条贯穿三个链接的直线。当您将鼠标悬停在链接上时，链接后面的路径部分应设置为正弦波动画。

我没有问题将整个路径设置为正弦波形状，但是当涉及到动画路径的一部分时，我很茫然:(

我在下面附上了一张参考图片，以了解我想要实现的目标。

下面是我目前用于动画路径的代码的jsfiddle。我是一个帆布菜鸟，请原谅我，如果它太可怕了......

https://jsfiddle.net/9mu8xo0L/

这是代码：

class App {

      constructor() {

        this.drawLine();

      }

      drawLine() {

        this.canvas = document.getElementById('sine-wave');
        this.canvas.width = 1000;

        this.ctx = this.canvas.getContext("2d");
        this.cpY = 0;
        this.movement = 1;
        this.fps = 60;

        this.ctx.moveTo(0, 180);
        this.ctx.lineTo(1000, 180);
        this.ctx.stroke();

        this.canvas.addEventListener('mouseover', this.draw.bind(this));

      }

      draw() {

        setTimeout(() => {

          if (this.cpY >= 6) return;

          requestAnimationFrame(this.draw.bind(this));

          // animate the control point
          this.cpY += this.movement;

          const increase = (90 / 180) * (Math.PI / 2);
          let counter = 0;
          let x = 0;
          let y = 180;

          this.ctx.beginPath();

          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

          for(let i = 0; i <= this.canvas.width; i += 6) {

            this.ctx.moveTo(x,y);

            x = i;
            y =  180 - Math.sin(counter) * this.cpY;

            counter += increase;

            this.ctx.lineTo(x, y);
            this.ctx.stroke();

          }

        }, 1000 / this.fps);

      }

    }

Answer 1

简单地将线条的绘制分为三个部分，将1/3绘制为直线，为中间部分设置动画并添加最后的1/3。

我将展示前1/3 +动画并将最后1/3作为练习（也将stroke()移到循环外部，这样它不会对每个段进行过度绘制） - 这里有重构和优化的空间，但我在这个例子中没有解决这个问题 -

  let x = this.canvas.width / 3;   // start of part 2 (animation)
  let y = 180;

  this.ctx.beginPath();

  this.ctx.clearRect(0, x, this.canvas.width, this.canvas.height);

  // draw first 1/3
  this.ctx.moveTo(0, y);
  this.ctx.lineTo(x, y);

  // continue with part 2
  for(let i = x; i <= this.canvas.width; i += 6) {
    x = i;
    y = 180 - Math.sin(counter) * this.cpY;

    counter += increase;

    // add to 2. segment
    this.ctx.lineTo(x, y);
  }

  // stroke line
  this.ctx.stroke();

<强> Modified fiddle