canvas绘制动态效果

要在canvas上绘制动态效果，可以使用requestAnimationFrame()方法来实现。该方法会在浏览器下一次重绘之前执行指定的函数，因此可以用它来实现动画效果。

具体实现方法是，在每一帧中清除canvas画布，然后重新绘制需要的图形，再调用requestAnimationFrame()方法来不断重复这个过程，从而实现动态效果。

以下是一个简单的例子：

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

let x = 0;

function draw() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制图形
  ctx.fillRect(x, 50, 50, 50);

  // 更新变量
  x += 5;

  // 循环调用draw函数
  requestAnimationFrame(draw);
}

// 开始动画
requestAnimationFrame(draw);