Canvas涂鸦核心是状态管理、坐标校准与路径隔离；mousedown须调beginPath()和moveTo()，用getBoundingClientRect()算真实坐标，mousemove只lineTo()不重复beginPath()，lineCap/lineJoin设为"round"，清空用clearRect()而非重置width。
Canvas涂鸦板不是“画几条线”就完事，核心是状态管理 + 坐标校准 + 路径隔离。漏掉任何一环，都会出现断线、飞线、卡顿或高DPR屏下糊成一片。
mousedown里必须调用
和
这是最常被跳过的初始化动作。不调用
，后续所有
都追加到上一条路径；不调用
，
会从(0, 0)连过来——这就是为什么松开鼠标再点一下，线总从左上角“炸”出来。
中：先
，再
，同时设
别用
/
：它们受CSS缩放、外边距、transform干扰，结果偏移不可控
务必用
算真实坐标：
mousemove中只
不
每次移动都新建路径，等于把整段轨迹拆成无数个独立短线，既断续又慢。正确做法是保持一个开放路径，持续追加端点。
仅当
时执行
和
千万别在
里重复写
——这会让每帧都重绘全部历史路径，画两笔就卡
如果想支持“抬起再点继续画”，
和
都要设
和
必须设为
默认
端点像刀切，相邻线段之间露白缝；
拐角尖锐突兀。涂鸦需要的是“手绘感”，不是工程制图。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
让每一段线头带圆弧，拼接顺滑
让折线拐角也变圆，避免生硬棱角
线宽建议从
起步试，
太细易断，
以上在快速拖动时容易糊成带状
清空画布别用
这行代码看似重置，实则重置整个canvas缓冲区，会丢弃CSS缩放、破坏高DPR适配，还可能触发强制重排。更糟的是：若你用CSS设置了
，它会让内容被拉伸变形。
清空唯一正解：
如需保留缩放适配（比如Retina屏），记得提前缓存
，并在
参数中乘上它
移动端要额外监听
/
，且取
而非
，坐标同样过
真正难的不是画出第一笔，而是让连续移动的每一帧都落在预期位置——坐标不准、路径没隔离、端点没圆化，三个问题叠加，涂鸦就变成“猜线游戏”。
beginPath()moveTo()beginPath()lineTo()moveTo()lineTo()mousedownctx.beginPath()ctx.moveTo(x, y)isDrawing = truee.offsetXe.offsetYcanvas.getBoundingClientRect()e.clientX - rect.leftlineTo()beginPath()isDrawing === truectx.lineTo(x, y)ctx.stroke()mousemovectx.beginPath()mouseupmouseoutisDrawing = falselineCaplineJoin"round""butt""miter"ctx.lineCap = "round"ctx.lineJoin = "round"4112canvas.width = canvas.widthwidth: 100%ctx.clearRect(0, 0, canvas.width, canvas.height)dprclearRect()touchstarttouchmovetouches[0]changedTouches[0]getBoundingClientRect()