canvas动态背景

可以使用 HTML5 的 canvas 元素来实现动态背景。具体实现方式可以是在 canvas 上绘制一些图形，然后通过定时器不断更新图形的位置、颜色等属性，从而实现动态效果。

以下是一个简单的示例代码：

<canvas id="bg-canvas"></canvas>

<script>
  const canvas = document.getElementById('bg-canvas');
  const ctx = canvas.getContext('2d');

  // 绘制背景
  function drawBackground() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  // 绘制图形
  function drawShape(x, y, r, color) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
  }

  // 更新图形位置、颜色等属性
  function updateShapes() {
    // TODO: 更新图形属性
  }

  // 渲染画面
  function render() {
    drawBackground();
    // TODO: 绘制图形
    updateShapes();
    requestAnimationFrame(render);
  }

  // 启动动画
  requestAnimationFrame(render);
</script>