Canvas涂鸦画板核心是监听鼠标/触摸事件并操作2D绘图上下文：设置canvas宽高属性、获取ctx后配置lineCap/lineJoin；通过mousedown/move/up三阶段结合isDrawing状态实现拖拽绘图；动态修改ctx.lineWidth实现笔迹粗细调节；补充橡皮擦、清空、保存图片及高分屏适配等实用功能。
网页端用 Canvas 实现涂鸦画板，核心是监听鼠标（或触摸）事件 + 操作 2D 绘图上下文。笔迹粗细调节只需动态设置 ctx.lineWidth，配合状态管理就能实时生效，不依赖复杂框架。
基础画布与绘图上下文准备
先在 HTML 中声明一个 <canvas></canvas> 元素，并通过 JavaScript 获取其 2D 上下文：
- 确保 canvas 有明确的
width和height属性（不是仅靠 CSS 缩放），否则绘制会模糊或偏移 - 用
getContext('2d')获取绘图环境，后续所有绘制操作都通过它完成 - 建议初始化时设置默认样式：
ctx.lineCap = 'round'和ctx.lineJoin = 'round'，让线条转角和端点更自然
实现鼠标拖拽涂鸦的关键逻辑
涂鸦本质是“按下 → 移动 → 抬起”三阶段连续绘图：
- 监听
mousedown：记录起始坐标，调用ctx.beginPath()开启新路径 - 监听
mousemove（且鼠标已按下）：用ctx.lineTo(x, y)连续添加点，再执行ctx.stroke() - 监听
mouseup或mouseout：调用ctx.closePath()或直接结束当前笔画，避免意外续画 - 注意：需用布尔变量（如
isDrawing）标记是否处于绘画中，防止空移触发绘制
动态调节笔迹粗细的方法
粗细控制完全由 ctx.lineWidth 决定，修改后立即影响后续所有描边：
- 提供一个 range 输入框或按钮组，例如：
<input type="range" min="1" max="20" value="3" id="lineWidth"> - 绑定 change 事件：
lineWidthInput.addEventListener('change', e => ctx.lineWidth = parseInt(e.target.value)) - 若支持移动端，记得同步处理
touchstart/touchmove事件，用touches[0].clientX/Y替代鼠标坐标 - 小技巧：可将 lineWidth 存入画笔对象（如
pen = { width: 3, color: '#000' }），便于统一管理和扩展功能（如保存/撤销）
补充实用功能建议
让画板更可用，几个轻量但关键的增强点：
-
橡皮擦：设
ctx.globalCompositeOperation = 'destination-out'，再用同粗细的透明色“画”即可擦除；操作完记得切回'source-over' -
清空画布：用
ctx.clearRect(0, 0, canvas.width, canvas.height)，比重绘背景色更可靠 -
保存为图片：调用
canvas.toDataURL('image/png')得到 base64 字符串，可创建 a 标签触发下载 -
适配高分屏：获取
window.devicePixelRatio，按比例放大 canvas 的实际绘制尺寸（canvas.width和canvas.height），再用 CSS 缩回显示尺寸，避免线条发虚
