微信小程序canvas实战指南，从绘图基础到高级交互

好，咱就直说，微信小程序的canvas，这东西看起来像个黑盒子，但只要你摸透了它的脾气，画图、做交互、搞游戏，都能玩出花来。这篇文章，咱们不整那些玄乎的概念，就聊聊怎么从零开始，一步步把canvas变成你的得力工具。

先说说最基础的绘图。小程序里用canvas，你得先在页面上画个框，就像铺开一张白纸。在wxml里加个``标签，绑上`canvas-id`，这就算有了画布。但别急着往上画，你得先拿到画布的“笔”——`wx.createCanvasContext`。这一步就好比你去画室，得先领支笔。然后，`setFillStyle`选颜色，`fillRect`画矩形，`draw`才真正落笔。刚开始，很多人会犯个错：不调`draw`，画了半天啥也没有。记住，你画的是“草稿”，`draw`才是“打印”出来的过程。

画完矩形，就该玩点花样了。弧线、圆形、路径，这些才是让画面活起来的关键。比如你想画个笑脸，`arc`命令就能画个半圆当嘴巴，`beginPath`和`closePath`用来控制你画的是哪一段。这里有个坑：坐标系是从左上角开始的，x轴往右，y轴往下，跟数学里的坐标系反着。你画个圆，圆心坐标是(x,y)，半径是r，起始角度和结束角度用弧度表示。很多新手会把角度搞混，记住，0度在右边，顺时针转。画个微笑的嘴巴，起始角度0，结束角度是π，妥妥的。画完别忘了`stroke`，不然线条出不来。

路径玩熟了，就该处理图片了。小程序canvas支持`drawImage`，但图片来源得是本地路径或者网络图片，且网络图片需要先通过`wx.downloadFile`或`wx.getImageInfo`拿到临时路径。这步容易卡住，因为图片加载是异步的，你还没下载完就画上去，画布上就一片空白。解决办法是等图片的`onLoad`回调触发后再执行`draw`。还有个技巧：用`wx.canvasToTempFilePath`能把画布内容导出成图片，保存或分享都方便。比如做个签名板，用户画完，点保存，就能生成一张带签名的图片，实用性很强。

接下来进入交互环节。光画不行，得让用户能点、能拖、能缩放。小程序里通过`bindtouchstart`、`bindtouchmove`、`bindtouchend`这些事件来监听手势。比如你想实现一个白板，用户手指划过的地方留下痕迹。在`touchstart`里记录起点坐标，`touchmove`里用`lineTo`画线，然后`stroke`。但有个问题：画出来的线不连贯，一段一段的。这是因为每次`touchmove`都重新调了`beginPath`。正确做法是：只在`touchstart`时调一次`beginPath`，之后`touchmove`只调`lineTo`和`stroke`，这样画出来的线才是平滑连续的。

交互再升级，就是拖拽和缩放。比如你画了个矩形，用户想把它挪个位置。你得先判断手指按下的位置是否在矩形区域内，然后记录偏移量，手指移动时用新坐标减去偏移量，再重新绘制。缩放同理，用`touchmove`里两个手指的距离变化来计算缩放比例，然后通过`scale`命令应用到画布上。这里要注意，每次重绘前都要用`clearRect`清空画布，不然旧图像还在，画面就花了。还有个细节：触摸事件的坐标是相对于页面，你得用`wx.createSelectorQuery`拿到canvas的偏移量，做个转换，否则手指和图形对不上。

高级交互里，动画是绕不过去的。小程序canvas没有内置的requestAnimationFrame，但你可以用`setInterval`或`setTimeout`来模拟。比如做一个旋转的风车，每隔16毫秒（60fps）更新一次角度，重新绘制。但用`setInterval`有个问题：如果绘制逻辑复杂，帧率会掉，画面会卡。更优的方案是用`requestAnimationFrame`的polyfill，或者用`wx.createAnimation`结合canvas的`draw`来优化。比如做一个弹跳球，每次`draw`前更新球的坐标和速度，碰到边界就反弹，配合`clearRect`和`draw`，看起来就像真的在蹦。

性能优化这块，很多人会忽略。画布上元素多了，绘制就慢。一个常见的坑是：每次`draw`都把整个画布重绘一遍。其实你可以只重绘变化的部分，用`canvasToTempFilePath`把静态背景存成图片，只更新动态元素。另一个优化是减少`draw`的调用频率，比如用`requestAnimationFrame`控制在60fps以内，或者合并多个绘制命令到一次`draw`里。还有，复杂图形用`clip`限制绘制区域，避免画布外的无用计算。比如做地图应用，只绘制屏幕可见区域，不画那些看不见的角落。

咱们聊聊踩过的那些坑。第一个坑：canvas在某些低端手机上渲染崩溃，尤其是图片尺寸过大时。解决办法是限制图片最大尺寸，或者用`pressImage`压缩后再画。第二个坑：canvas的`toTempFilePath`在iOS和安卓上表现不一样，iOS有时会返回空白图片。排查方法：确保`draw`的回调里调用导出方法，别在绘制前就导出。第三个坑：canvas的坐标系在iPhoneX等刘海屏上会偏移，因为安全区域占了空间。你得动态获取设备信息，调整画布位置。这些坑，都是实战里一步步填过来的，记下来，能少走不少弯路。

从画个矩形到做复杂的交互动画，微信小程序的canvas就像一把瑞士军刀，功能全，但需要耐心去磨合。你越是熟悉它的边界和脾气，就越能用它做出让人眼前一亮的东西。别怕报错，别嫌麻烦，每一次调试都是对工具更深的理解。下次再打开编辑器，直接上手画第一笔，你会发现，canvas没那么神秘，它就是一张等着你涂鸦的白纸。