好，咱们直接聊微信小程序里的 canvas。说实话，我刚开始碰这玩意儿的时候，心里也犯嘀咕：不就是个画布嘛，能有多复杂？结果一上手，才发现坑不少。但别怕，咱今天就把这事儿掰扯清楚，从最基础的创建到实战技巧，全给你说明白。

先说说怎么在小程序里搭起这个“画布”。微信小程序的 canvas 跟网页端不太一样，它用的是 WXML 标签，写成 。注意，这个 必须唯一，别重复，不然两个画布会打架。还有一点，小程序里 canvas 的尺寸默认是 300×150 像素，如果想改，直接在 style 里写宽高，或者用 动态获取父容器大小。我习惯给 canvas 加个 属性，因为新版 API 更稳定，老版本默认也是 2d，但如果用旧版，得显式声明。创建完了，你以为就完事儿了？别急，还得在 JS 里初始化。用 拿到上下文，这才是你真正画东西的工具。就像拿笔之前，得先开墨水瓶一样。

接下来，咱们聊聊绘制基础图形。拿到上下文后，画矩形、圆形、线条都很简单。比如画个红色矩形：，然后 ，注意坐标是从左上角开始算的。画圆的话，用 ，再 。这里有个坑：小程序 canvas 的坐标系统跟网页一样，但像素密度高，直接画会模糊。解决办法是缩放：在初始化时，用 ，其中 是设备像素比，比如 iPhone 的 2 或 3。我踩过这个坑，画出来的图标发虚，后来加了缩放，立马清晰。画线时，记得用 开始新路径，不然线会连在一起，效果很丑。

光画静态图形没啥意思，真正用到 canvas 的地方往往是动态数据可视化，比如图表、进度条。拿一个简单的柱状图来说，你需要先算好数据，例如 ，然后确定每个柱子的位置和高度。关键在于坐标换算：画布高度是 200 px，数据最大值是 80，则比例尺是 。第一个柱子从 x = 20 px 开始，高度 = 20 × 2.5 = 50 px，画 。这里要注意，y 坐标是从上往下算的，所以要用画布高度减去实际高度。我刚开始总搞反，柱子会倒着长。为了更好看，可以加个渐变填充，用 。别忘了画坐标轴和标签，用 写文字，留意字体大小和位置，避免与柱子重叠。

说到动态效果，canvas 也能做动画，比如进度条转圈。原理很简单：用 或 每帧重绘画布。比如一个圆形进度条，先画一个灰色底圆，再画一个彩色弧。弧的角度根据进度算， 从 0 到 1，弧长 = 。绘制时，用 ，注意角度是弧度。每次更新 后，先清除画布 ，再重绘。但频繁清屏会导致闪烁。解决办法是只更新变化的区域，或者使用双缓冲——先画到离屏 canvas，再一次性绘制到主 canvas。小程序里可以创建两个 canvas，一个隐藏一个显示，也可以直接用 的回调控制。我试过，帧率能稳定在 60 fps。

再深入点，canvas 还能跟用户交互，比如点击画布上的元素触发事件。这得靠 绑定到 canvas 标签上，然后在事件处理函数里获取点击坐标。用 和 ，但要注意这两个坐标是相对于 canvas 的，不是页面。拿到坐标后，需要判断它是否落在某个图形内。比如判断是否点击了矩形，只要检查 是否在矩形的 x 范围内， 是否在 y 范围内。圆形则计算距离 。我做过一个互动游戏，玩家点击画布上的目标，目标会消失并计分。关键是把每个图形的坐标和尺寸存成数组，点击时遍历判断。若图形数量很多，遍历会卡顿，优化方案可以使用四叉树或空间哈希，但在小程序场景下，几十个图形直接遍历已经足够。

聊聊实战中遇到的坑和技巧。第一个坑：canvas 在滚动页面里会闪烁。因为小程序渲染机制，canvas 是原生组件，层级高，滚动时重绘跟不上。解决办法是让 canvas 固定位置，或者使用 。第二个技巧：保存画布为图片，用 ，再配合 。这需要用户授权，而且必须在 的回调里调用，否则保存的会是空白。第三个技巧：字体渲染。小程序 canvas 不支持自定义字体加载，只能使用系统字体，例如 。如果想用特殊字体，可以先把文字转成图片，或者使用 （兼容性一般）。我做过一个签名板功能，用户手写签名后保存为图片。实现时监听 事件实时绘制路径，并使用 让端点圆润，提升平滑度。

说到底，微信小程序的 canvas 是个强大但需要耐心的工具。它不像网页 canvas 那么自由，但在小程序生态里，用它做图表、游戏、画板、数据可视化，效果出奇地好。刚开始可能会被坐标、缩放、事件这些细节绊住，但多写几个 demo，你就能找到手感。记住几个原则：先规划好坐标系统，处理好像素比，动画用 而不是 ，交互用坐标判断而不是 UI 组件。等你上手了，会发现 canvas 其实挺“听话”的——你让它画圆，它绝不画方。只要慢慢磨，终会画出想要的画面。