微信小程序：CanvasContext.draw异步介绍

在微信小程序的开发之旅中，Canvas 是一块充满无限可能的画布，它赋予了开发者在小程序内绘制图形、实现复杂动画的强大能力。而其中的 CanvasContext.draw() 方法作为绘制流程的关键一环，其异步特性更是值得我们深入探讨。本文将从基本概念出发，逐步揭开 draw() 异步行为的面纱，通过丰富的代码示例、实战策略，以及在开发过程中可能遇到的问题与解决方案，全面剖析如何高效、安全地利用这一机制，为你的小程序增添更多视觉魅力。

一、CanvasContext.draw() 基础探秘

1.1 CanvasContext 简介

在微信小程序中，CanvasContext 是一个用于操作 <canvas> 组件的上下文对象，通过它我们可以执行各种绘图操作，如填充颜色、绘制路径、添加文本等。

1.2 draw() 方法概述

draw() 方法的作用是将当前画布上的所有绘图操作提交给系统，以便最终显示。重要的是，此方法执行后并不立即返回绘图完成的状态，而是异步进行，这意味着在调用之后立即访问画布内容可能尚未更新。

1.3 为什么是异步？

异步设计是为了避免阻塞主线程，提高用户体验。尤其是在复杂的绘图场景下，异步机制能够确保用户界面保持响应，不会因长时间的绘图操作而卡顿。

二、掌握异步 draw() 的使用艺术

2.1 简单示例：异步绘制的直观感受

Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas');

    // 绘制圆形
    ctx.beginPath();
    ctx.arc(100, 100, 50, 0, Math.PI * 2);
    ctx.setFillStyle('red');
    ctx.fill();

    // 提交绘制指令
    ctx.draw(false, () => {
      console.log('绘制完成');
    });
  }
});

注意：第二个参数是一个回调函数，当绘制操作完成时被调用，这是处理异步行为的关键。

2.2 异步处理实战技巧

链式绘制

连续的绘制操作需要基于前一个 draw() 的完成，可以利用回调函数实现链式调用。

ctx.draw(false, () => {
  ctx.setFillStyle('blue');
  ctx.fillRect(200, 100, 50, 50);
  ctx.draw(false, () => {
    console.log('第二阶段绘制完成');
  });
});

使用 Promise 化简异步流程

为简化嵌套，可以封装 draw 为返回 Promise 的函数：

function drawAsync(ctx, actions) {
  return new Promise((resolve, reject) => {
    ctx.draw(false, () => resolve());
  }).then(() => {
    if (typeof actions === 'function') actions(ctx);
  });
}

// 使用示例
drawAsync(ctx, () => {
  ctx.setFillStyle('green');
  ctx.rect(150, 150, 50, 50);
  ctx.stroke();
}).then(() => {
  console.log('绘制序列完成');
});

三、实战应用：动画与性能优化

3.1 实现动画循环

利用 requestAnimationFrame 结合异步 draw() 可以轻松创建流畅动画。

let frame = 0;
function animate() {
  ctx.clearRect(0, 0, 300, 90);
  ctx.setFillStyle(`hsl(${frame}, 100%, 50%)`);
  ctx.fillRect(0, 0, 300, 90);
  ctx.draw(false, () => requestAnimationFrame(() => {
    frame = (frame + 1) % 360;
    animate();
  }));
}

onReady() {
  animate();
}