uni-app 中如何使用 canvas 绘制动画？

推荐答案

在 uni-app 中使用 canvas 绘制动画可以通过以下步骤实现：

1. 创建 Canvas 上下文：使用 uni.createCanvasContext 创建 Canvas 上下文对象。
2. 绘制初始图形：使用 Canvas 上下文的绘图方法（如 fillRect、drawImage 等）绘制初始图形。
3. 更新动画状态：在 requestAnimationFrame 或 setTimeout 中更新动画的状态（如位置、颜色等）。
4. 清除画布并重新绘制：在每次更新动画状态后，使用 clearRect 清除画布，并重新绘制更新后的图形。
5. 循环动画：通过递归调用 requestAnimationFrame 或 setTimeout 实现动画的循环。

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

// www.javascriptcn.com code example
export default {
  data() {
    return {
      x: 0,
      y: 0,
      ctx: null,
    };
  },
  mounted() {
    this.ctx = uni.createCanvasContext('myCanvas', this);
    this.draw();
  },
  methods: {
    draw() {
      // 清除画布
      this.ctx.clearRect(0, 0, 300, 150);

      // 绘制矩形
      this.ctx.fillStyle = 'red';
      this.ctx.fillRect(this.x, this.y, 50, 50);

      // 更新位置
      this.x += 1;
      this.y += 1;

      // 重新绘制
      this.ctx.draw();

      // 循环动画
      requestAnimationFrame(this.draw);
    },
  },
};

本题详细解读

1. 创建 Canvas 上下文

在 uni-app 中，uni.createCanvasContext 用于创建一个 Canvas 上下文对象。这个对象提供了丰富的绘图 API，如 fillRect、strokeRect、drawImage 等，用于在 Canvas 上绘制图形。

this.ctx = uni.createCanvasContext('myCanvas', this);

2. 绘制初始图形

在 draw 方法中，首先使用 clearRect 清除画布，然后使用 fillRect 绘制一个矩形。fillStyle 用于设置填充颜色。

this.ctx.clearRect(0, 0, 300, 150);
this.ctx.fillStyle = 'red';
this.ctx.fillRect(this.x, this.y, 50, 50);

3. 更新动画状态

在每次绘制时，更新矩形的位置（x 和 y），使其向右下方移动。

this.x += 1;
this.y += 1;

4. 清除画布并重新绘制

在每次更新动画状态后，使用 clearRect 清除画布，并调用 draw 方法重新绘制更新后的图形。

this.ctx.clearRect(0, 0, 300, 150);
this.ctx.draw();

5. 循环动画

通过 requestAnimationFrame 或 setTimeout 实现动画的循环。requestAnimationFrame 是浏览器提供的 API，用于在下一帧渲染前调用指定的回调函数，从而实现平滑的动画效果。

requestAnimationFrame(this.draw);

注意事项

• 性能优化：在复杂的动画场景中，频繁的 clearRect 和 draw 操作可能会影响性能。可以考虑使用离屏 Canvas 或 WebGL 来优化性能。
• 兼容性：requestAnimationFrame 在现代浏览器中支持良好，但在某些旧版本浏览器中可能需要使用 setTimeout 作为替代方案。
• Canvas 尺寸：确保 Canvas 的尺寸设置正确，避免绘制内容超出 Canvas 范围。

通过以上步骤，你可以在 uni-app 中使用 canvas 实现简单的动画效果。