微信小程序 Canvas 组件实现自由绘图
一、案例介绍
本次案例使用微信小程序type="2d"的 Canvas 组件，实现手写涂鸦画板。基础功能支持手指触摸滑动绘制线条、一键清空画布；扩展功能新增按钮，循环切换画笔线条颜色。适合学习小程序 Canvas 绘图 API 与触摸事件。
二、开发环境
微信开发者工具，小程序基础渲染模式，Canvas 2D。
三、核心知识点
- Canvas 2D 新版画布，使用
createSelectorQuery获取画布节点和绘图上下文 - 设备像素比 dpr 缩放画布，解决绘图模糊问题
- 触摸事件：
touchstart触摸开始落笔、touchmove触摸移动绘图 - 绘图 API：
beginPath()、moveTo()、lineTo()、stroke()、clearRect() - 点击事件 + 数据驱动，实现画笔颜色轮换切换
四、功能说明
- 手指在蓝色画布上滑动，即可绘制线条，线条端点为圆角，线条粗细为 6px；
- 【清空画布】按钮：一键清除画布上所有绘制内容；
- 【切换画笔颜色】按钮：循环切换红、绿、蓝、橙四种画笔颜色，切换后弹出提示；
- 页面顶部展示红色加粗标题 “自由绘图”。
五、关键代码说明
- onReady 生命周期：页面准备完成，获取 canvas 节点、绘图上下文，根据像素比缩放画布，解决模糊；
- paintStart：手指按下，开启新路径，设置画笔样式、当前选中颜色；
- paintMove：手指持续滑动，连线并描边绘图；
- clearCanvas：调用 clearRect 清空整个画布；
- changeColor：颜色下标自增，循环切换颜色数组，更新画笔颜色。
六、运行效果
模拟器和真机调试都可以正常绘图。点击切换颜色按钮之后，新绘制的线条使用新颜色，旧线条保留不变；点击清空画布，全部笔迹清除。
七、总结
Canvas 组件是小程序实现绘图、签名、画板的核心。结合触摸事件，能够实现移动端手绘功能。本次在基础画板上扩展颜色切换，加深了对小程序事件和响应式数据的理解。
