如何使用 canvas 绘制动画？

推荐答案

// www.javascriptcn.com code example
// 1. 获取 canvas 上下文
const ctx = wx.createCanvasContext('myCanvas');

// 2. 定义动画帧函数
function drawFrame() {
  // 清空画布
  ctx.clearRect(0, 0, 300, 300);

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

  // 更新图形位置
  x += dx;
  y += dy;

  // 边界检测
  if (x + 50 > 300 || x < 0) {
    dx = -dx;
  }
  if (y + 50 > 300 || y < 0) {
    dy = -dy;
  }

  // 绘制到画布
  ctx.draw();

  // 请求下一帧
  requestAnimationFrame(drawFrame);
}

// 3. 初始化变量
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

// 4. 启动动画
drawFrame();

本题详细解读

1. 获取 canvas 上下文

在微信小程序中，首先需要通过 wx.createCanvasContext 方法获取 canvas 的绘图上下文。这个上下文对象 ctx 提供了绘制图形、文本、图像等的方法。

2. 定义动画帧函数

动画的核心是逐帧绘制。drawFrame 函数是每一帧的绘制逻辑。在这个函数中，首先使用 clearRect 方法清空画布，然后绘制图形（如矩形、圆形等），接着更新图形的位置，最后调用 ctx.draw() 将绘制内容渲染到画布上。

3. 初始化变量

在动画中，通常需要一些变量来控制图形的位置、速度等。例如，x 和 y 表示图形的当前位置，dx 和 dy 表示图形在每一帧中的移动距离。

4. 启动动画

通过 requestAnimationFrame 方法，可以递归调用 drawFrame 函数，从而实现动画的连续播放。requestAnimationFrame 会根据浏览器的刷新率自动调整帧率，保证动画的流畅性。

5. 边界检测

在动画中，通常需要对图形的运动进行边界检测，以防止图形超出画布范围。例如，当图形的 x 坐标超出画布宽度时，可以反转 dx 的值，使图形向相反方向移动。

通过以上步骤，你可以在微信小程序中使用 canvas 绘制简单的动画效果。