抓取HTML5画布的每个帧

function handleAnimationFrame() {
  // 获取当前 HTML5 画布的上下文
  const canvas = document.getElementById('canvas');
  // 获取当前画布的大小
  const canvasWidth = canvas.offsetWidth;
  const canvasHeight = canvas.offsetHeight;
  // 获取当前画布的上下文
  const context = canvas.getContext('2d');
  // 获取当前帧的绘制区域
  const rect = canvas.getBoundingClientRect();
  const x = rect.left;
  const y = rect.top;
  // 获取当前帧的绘制区域宽度和高度
  const width = rect.width;
  const height = rect.height;
  // 获取当前帧的绘制坐标
  const xPos = x + width / 2;
  const yPos = y + height / 2;
  // 绘制当前帧
  context.beginPath();
  context.arc(xPos, yPos, 10, 0, 2 * Math.PI);
  context.fillStyle = '#0097e6';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#0097e6';
  context.stroke();
}
// 将 handleAnimationFrame 函数注册为帧事件处理程序
window.addEventListener('AnimationFrame', handleAnimationFrame);