案例需求页面展示type2d新版 canvas 画布蓝色背景手指在画布滑动可以自由绘制线条。bindtouchstart手指按下设置绘图起点bindtouchmove手指移动持续画线。 3.【清空画布】按钮调用clearRect清除画布全部绘制内容。✨作业扩展增加【改变画笔线条颜色】按钮点击在红色、绿色之间切换画笔颜色。完整代码1.app.json2.pages/index/index.wxml3.pages/index/index.wxss4.pages/index/index.js含作业扩展切换画笔颜色增加空判断防报错5.app.wxss 全局样式核心知识点1.canvas‑2d 组件常用属性属性说明type2d新版 2D 画布必须配置不带 type 的旧版 canvas 已经废弃id供createSelectorQuery获取 canvas 节点id 内横线必须是英文半角-bindtouchstart手指按下触摸事件绘图起点bindtouchmove手指在画布上移动持续绘制线条2. 绘图上下文 APIgetContext(2d)获取 2D 绘图上下文 ctx所有绘图操作由 ctx 完成。dpr 设备像素比适配canvas 实际像素 css 尺寸 × dpr执行ctx.scale(dpr,dpr)缩放坐标系解决线条模糊锯齿。moveTo(x,y)抬起画笔移动到起点坐标。lineTo(x,y)定义直线路径到目标坐标。stroke()执行描边真正把线条绘制到画布。strokeStyle画笔线条颜色。lineWidth画笔粗细。lineCap:round线条端点圆角lineJoin:round线条拐角圆角。beginPath()开启一条全新路径。clearRect(x,y,w,h)清空指定矩形画布区域。3.touches 触摸对象e.touches[0]获取第一个触摸点.x、.y坐标是相对于 canvas 画布左上角。4. 作业扩展逻辑data 中定义strokeColor变量保存当前画笔颜色点击按钮在红色#ff0000、绿色#00ff00来回切换每次绘图读取 data 里面保存的颜色。踩坑实录坑 1报错Cannot read property node of null90% 原因复制代码带入中文全角横线canvas 的 id 和 js 选择器不匹配。wxml 中idmy‑canvas如果是中文长横线js#my‑canvas选择器找不到节点解决方案全部替换为英文半角idmy‑canvas增加防御判断res [0] 不存在直接 return避免程序崩溃。坑 2画布线条模糊锯齿严重忘记 dpr 像素适配onReady 回调内部必须乘pixelRatio并且执行ctx.scale(dpr,dpr)。坑 3画不出线条忘记写stroke()lineTo只是定义路径stroke()才真正绘制获取 canvas 节点时机必须放在onReady的 exec 回调里面onLoad 阶段 DOM 还未渲染完成拿不到节点复制代码带入中文全角符号wxml/wxss 报unexpected character。坑 4切换颜色旧线条跟着变色canvas 绘制完成的像素是静态strokeStyle仅控制后续新画的笔迹旧笔迹不会变化属于正常现象。坑 5清空画布后继续绘画有尾巴残留clear()内部调用ctx.beginPath()清空画布同时重置绘制路径。坑 6不要使用旧版 canvas 组件本案例统一用type2d新版 canvas不带 type 属性的旧 canvas 组件官方已经废弃。