canvas的贝塞尔曲线动画

使用贝塞尔曲线可以实现各种动画效果，比如平滑的曲线运动、缓动效果等。在Canvas中，我们可以使用贝塞尔曲线来实现这些效果。

首先，我们需要定义曲线路径。在Canvas中，使用bezierCurveTo方法来绘制贝塞尔曲线。该方法需要四个参数，分别表示两个控制点和终点的坐标。我们可以通过计算来确定这些坐标，以实现不同的曲线路径。

接下来，我们需要实现动画效果。可以使用requestAnimationFrame方法来实现动画帧的更新。在每一帧中，我们可以通过改变绘制的坐标点来改变曲线路径，从而实现动画效果。

以下是一个简单的例子，实现了一个平滑的曲线运动效果：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 定义曲线路径
const startX = 50;
const startY = 200;
const endX = 450;
const endY = 200;
const controlX = 250;
const controlY = 100;

// 绘制曲线路径
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(controlX, controlY, controlX, controlY, endX, endY);
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.stroke();

// 实现动画效果
let t = 0;
function animate() {
  t += 0.005;
  if (t > 1) {
    t = 1;
  }
  
  const x = (1 - t) * (1 - t) * startX + 2 * t * (1 - t) * controlX + t * t * endX;
  const y = (1 - t) * (1 - t) * startY + 2 * t * (1 - t) * controlY + t * t * endY;
  
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.bezierCurveTo(controlX, controlY, controlX, controlY, endX, endY);
  ctx.lineWidth = 5;
  ctx.strokeStyle = 'black';
  ctx.stroke();
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
  
  if (t < 1) {
    requestAnimationFrame(animate);
  }
}

animate();

在这个例子中，我们首先定义了一个贝塞尔曲线路径，然后使用bezierCurveTo方法绘制出来。接着，在动画的每一帧中，我们通过计算来确定当前点的坐标，并将其绘制出来。最后，使用requestAnimationFrame方法来实现动画效果。