从零上手微信小程序画布绘制，三步创建专属画板

先说个事，我见过很多人提到小程序里的画布功能，第一反应就是“这玩意儿是不是得懂图形学才能碰”。其实不是。微信小程序的 canvas 说白了，就跟小时候在纸上画画一样，只不过笔和纸换成了代码和屏幕。现在的版本已经升级到 Canvas 2D 接口，逻辑更清晰，只要花点时间，就能做出自己的画板。所以这篇文章，我把内容掰开揉碎，用三步带你上手，保证从零开始也能轻松上手。

第一步，也是最容易卡住的地方——创建画布组件。很多人直接在 WXML 里写一堆标签，结果画布不渲染，甚至出现黑屏。问题通常出在没弄清楚新版 Canvas 的初始化方式。你需要在页面的 onReady 生命周期里，用 `wx.createSelectorQuery()` 选中 canvas 节点，再调用 `node.getContext('2d')`，拿到 2D 上下文对象。这个对象才是你真正握在手里的画笔。记住，老版的 `wx.createContext()` 已经废弃，别再浪费时间在旧文档上。还有个小坑：canvas 组件一定要设置明确的宽高，别指望它自适应，否则画出来的图形尺寸会和预期差得十万八千里。

拿到画笔后，第二步就是让它能响应触摸事件。这是画板的核心，也是最容易写出 bug 的环节。你需要监听三个事件：`touchstart` 是手指按下的瞬间，`touchmove` 是手指移动的过程，`touchend` 是手指抬起。思路很简单：按下时记录起点，移动时从上一个点画到当前点，抬起时结束当前笔触。但这里有个细节，很多人直接在 `touchmove` 里用 `ctx.lineTo()`，结果线条断断续续。因为每次移动的坐标是相对于画布左上角的，你得用 `e.touches[0].x` 和 `e.touches[0].y` 取值，并且别忘了配合 `ctx.beginPath()` 与 `ctx.stroke()`。我见过有人忘了 `beginPath()`，导致所有线段连成一片，画出来全是蜘蛛网。

这里再插一句，如果你觉得线条太生硬，想要更圆润的笔触，别急着上贝塞尔曲线。先用 `ctx.lineCap = 'round'` 和 `ctx.lineJoin = 'round'` 把笔帽和拐角改成圆形，视觉上立刻顺滑一个档次。这俩属性是画板体验的隐藏加分项，其实只要两行代码。

第三步，也是让画板真正“活”起来的一步——完善交互和保存功能。画板不能光能画，你还得能清空、撤销，甚至把作品保存到手机相册。清空最简单，直接 `ctx.clearRect(0, 0, canvasWidth, canvasHeight)` 就行。但撤销则稍微复杂，需要维护一个历史栈，每画完一笔就把当前画布状态存下来。这里要注意性能，千万别存像素数据，太占内存。你可以存 `canvas.toDataURL()` 生成的图片链接，或者保存 JSON 格式的轨迹点数组，回放时重新绘制。至于保存功能，用 `wx.canvasToTempFilePath()` 把画布导出成临时文件，再调 `wx.saveImageToPhotosAlbum()`，记得先申请授权，否则用户会直接报错。

说到授权，我得提醒你一句，真机调试和模拟器上的表现有时候不一样。模拟器里点保存可能直接成功，但真机上会弹出授权框，如果不处理拒绝的情况，用户再点保存就没有反应。所以代码里要判断 `authSetting['scope.writePhotosAlbum']`，如果用户拒绝，就引导他们到设置页打开权限。这种细节才是决定你的画板是“玩具”还是“工具”的关键。

还有个容易忽略的点，是 canvas 的尺寸适配。你写死 320×480，在 iPhone 15 上看着还行，换到 iPad 上就糊成一片。正确的做法是用 `wx.getSystemInfoSync()` 拿到屏幕宽度，然后按比例计算 canvas 宽度，高度可以按设计稿比例（比如宽度的 1.2 倍）设定。同时记得调用 `ctx.scale(dpr, dpr)`，这里的 dpr 是设备像素比，不设置的话，在 Retina 屏上画出来的线条会显得发虚。这一步不是必须的，但做了之后，你的画板在高端手机上的观感会直接提升一个档次，用户会觉得“这开发者挺讲究”。

再说一个进阶的小技巧，算是给你的彩蛋。你可以给画板加个“笔刷大小”的滑块，甚至支持颜色选择器。颜色选择器不用自己写组件，微信自带的 `picker` 模式选 `color` 就能调出系统色板。笔刷大小就用 `slider` 组件，最小值 1，最大值 20，绑定到 `ctx.lineWidth` 上。这样你的画板就不只是能画黑线了，用户能画出有层次的作品。而且这些功能加起来的代码量，比你想象的要少得多，也就多两三十行。

回到开头说的，微信小程序的 canvas 真没那么玄乎。你只要记住三步：初始化拿到画笔、监听触摸画线、处理交互和保存。这三步走完，你的专属画板就已经能拿出去给人用了。剩下的压感、橡皮擦、图层，都是在这些基础逻辑上堆功能而已。但话说回来，如果你连画一条线都画不顺手，那些高级功能就是空中楼阁。所以现在，打开你的开发者工具，照着这三步敲一遍代码，比看我写一万个字都有用。画板这东西，动手才是硬道理。