Canvas 2D：绘制、状态、坐标与重绘

依据：官方文档与本站教学拆解｜环境：浏览器 Canvas 2D；小游戏接口需单独核对｜真机：未验证

Canvas 2D 提供绘制路径、图片和文字的接口。你发出一系列命令，画布留下像素。画完一个圆角矩形后，画布不会自动知道它是“领取按钮”，也不会自动维护布局、可访问性或按钮状态。这些语义由你的应用管理。

每一帧怎样组成画面

常见游戏循环先更新状态，再清除需要重绘的区域，按照层级依次画背景、物品、文字与反馈。绘图顺序影响覆盖关系。保存状态、平移和缩放能让一个面板内部使用自己的局部坐标；绘制完恢复状态，可以避免变换、透明度或裁剪影响后面的对象。

查看原图 ↗

单个对象动起来时，不是移动已经存在的“按钮元素”，而是状态更新后再次绘制。是否全画布重绘或维护脏区域，取决于界面变化、实现复杂度和测量结果。不要在尚未确认瓶颈前构建复杂的局部重绘系统。

坐标与触摸要用同一套规则

显示宽度、画布像素宽度和逻辑坐标可能不同。浏览器中需要结合元素位置与缩放，把指针坐标转为画布逻辑坐标；小游戏应使用其触摸事件和屏幕信息。若只把图片缩放而未同步命中计算，就会出现“看得见但点不到”的按钮。

查看原图 ↗

绘制一万个物品还涉及裁剪、可见项计算、对象复用和资源加载。Canvas 让这些决策显式可控，也让你承担维护责任。这个特点适合用于理解 UI 的工作过程，不意味着它天然适合所有项目规模。

失败案例：忘记恢复裁剪状态

画完背包后继续画弹窗，却发现弹窗只出现一小块，常见原因是列表的裁剪范围仍然生效。把局部绘制封装为成对的 save 与 restore；异步资源加载完成后更新状态，而不是从回调中不受控地插入绘图顺序。

展开：一个局部坐标绘制函数

function drawPanel(ctx: CanvasRenderingContext2D, x: number, y: number) {
  ctx.save();
  ctx.translate(x, y);
  ctx.fillStyle = '#34796a';
  ctx.fillRect(0, 0, 180, 64);
  ctx.fillStyle = '#fff';
  ctx.fillText('领取奖励', 30, 39);
  ctx.restore();
}

这是浏览器类型定义示例；在小游戏里获取上下文与事件的方式应按平台接口调整。

什么时候选择它

少量界面、明确的布局规则和偏代码的团队，可以用 Canvas 快速掌控全流程。复杂页面与协作需求增长后，应评估引擎或 UI 编辑器能节省多少结构维护工作。先操作按钮演示和背包演示，再对照Cocos 的组件工作流。

来源

MDN Canvas 教程、变换与状态说明浏览器接口；平台移植边界见Cocos 微信小游戏发布说明。