uni-app中canvas画线无反应，因上下文不自动渲染且平台差异大：H5需style设宽高并用id，小程序需canvas-id；必须调用ctx.draw()；touch坐标需转为canvas坐标；线条断开需用isDrawing控制路径连续性；清空画布宜用fillRect覆盖而非clearRect。
uni-app里canvas画线为什么没反应
因为uni.createCanvasContext创建的上下文默认不自动渲染，且canvas组件在不同平台（尤其是H5和小程序）对canvas-id、宽高设置、像素比处理差异很大。最常见的是：H5端未设置style="width:100%;height:100%"，或小程序端canvas-id重复、未用id而用了canvas-id属性绑定。
实操建议：
- 务必给
标签同时设置canvas-id（小程序必需）和id（H5必需），例如： - H5端必须用
style显式设宽高，不能只靠width/height属性；小程序端则优先以width/height属性为准（单位rpx） - 获取上下文后，每次绘制完必须调用
ctx.draw()，否则无任何输出 - 避免在
onLoad里立即绘图——需等canvas节点挂载完成，推荐用uni.createSelectorQuery()查节点后再初始化
touchstart/touchmove事件拿不到正确坐标
uni-app中touch事件对象里的touches[0].x / y是屏幕坐标，不是canvas坐标。直接用它绘图会导致偏移，尤其在有滚动、缩放、状态栏或自定义导航栏时更明显。
实操建议：
- 用
uni.createSelectorQuery().select('#myCanvas').boundingClientRect()提前拿到canvas左上角相对于视口的left和top - 计算canvas坐标：
const x = e.touches[0].clientX - rect.left; const y = e.touches[0].clientY - rect.top; - 注意H5下可能需除以
window.devicePixelRatio做像素比校正（仅当canvas实际渲染尺寸≠CSS尺寸时）；小程序端createCanvasContext已内部处理，一般不用手动除 - 别用
e.detail.x——那是canvas组件自定义事件才有的字段，原生touch事件没有
线条断开、不连贯怎么修复
移动端touchmove触发频率高但不均匀，若每次move都beginPath() + moveTo() + lineTo()，会因点间距大或丢帧导致“虚线感”或折角突兀。
实操建议：
- 用
isDrawing标志位控制路径连续性：touchstart时ctx.moveTo(x, y)并设isDrawing = true；touchmove时只ctx.lineTo(x, y)；touchend时ctx.stroke()并重置 - 启用抗锯齿：
ctx.setLineCap('round'); ctx.setLineJoin('round');，避免转角生硬 - 线宽建议≥2，太细在retina屏上易发虚；颜色避免用
rgba(0,0,0,0.5)这类半透——多次叠加会变深，应统一用纯色+透明度控制 - 性能敏感场景可节流touchmove（如
setTimeout防抖），但会牺牲精度；更稳妥是记录点序列，最后批量绘制
清空画布后线条残留或闪屏
直接ctx.clearRect(0,0,w,h)在部分安卓WebView或旧版微信小程序里会触发闪烁，且若清空逻辑和绘制逻辑异步混用（比如清空后立刻draw新内容），可能残留上一帧残影。
实操建议：
- 清空不用
clearRect，改用覆盖一层同色背景：ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, width, height); - 确保清空和绘制都在同一个
ctx.draw()周期内完成——即清空后不要立即draw()，而是累积所有操作后再一次性draw(true)（true表示清空之前所有指令） - 如果用
canvas的type="2d"（H5专属），清空前先ctx.save()，清空后ctx.restore()，避免transform状态污染 - 真机调试时发现残留，大概率是canvas宽高被动态修改过但未同步重设
ctx的width/height属性——需手动重赋值
canvas坐标系、设备像素比、平台渲染机制这三块叠在一起，稍动一个参数就可能让线条消失或错位。动手前先用console.log打点确认canvas节点尺寸、touch坐标差值、ctx是否成功创建——比反复改绘图逻辑更省时间。
