直接修改 drawingmode 属性即可切换画笔开关，但需确保画布实例已初始化且未销毁，避免事件重复绑定、引用错误、移动端事件适配及监听器未解绑等问题。
点击按钮切换画布的 drawingMode 状态
Konva 或 Fabric.js 这类 Canvas 库里，drawingMode 是控制画笔开关的核心属性。直接改它就行，但得确保画布实例已初始化且未被销毁。常见错误是按钮点击时 canvas 或 stage 还没加载完成，或者多次绑定事件导致重复触发。
- 用
stage.set({ drawingMode: true })开启涂鸦，stage.set({ drawingMode: false })关闭 - 按钮需绑定在 stage 初始化之后，推荐放在
stage.on('ready', ...)或 DOMContentLoaded 后执行 - Fabric.js 中对应的是
canvas.isDrawingMode = true/false，不是set()方法 - 开启前检查
stage.isDragging() === false，否则拖动画布会干扰笔迹
HTML 按钮和 JS 逻辑必须严格配对
按钮本身只是触发器，真正起作用的是 JS 对 canvas 实例的操作。如果按钮没反应，大概率是 JS 拿不到 canvas 引用，或引用指向了错误对象（比如取了 document.getElementById('canvas') 而不是 Fabric 的 canvas 实例）。
- 给按钮加
id="toggle-draw"，用document.getElementById('toggle-draw').addEventListener('click', ...)绑定 - 避免用
onclick="toggleDraw()"内联写法，容易污染全局作用域且调试困难 - 切换时同步更新按钮文字或 class：
btn.textContent = canvas.isDrawingMode ? '关闭画笔' : '开启画笔' - 如果用了 React/Vue，确保 canvas 实例在组件生命周期内稳定可访问，别在 unmount 后还调用
set
关闭画笔后要清理临时图形状态
单纯设 drawingMode = false 不会清除正在绘制的半成品线条，用户可能误触留下残影。Fabric.js 有 canvas.freeDrawingBrush.color 和 canvas.freeDrawingBrush.width，Konva 则依赖 Line 的 points 数组，这些都需要手动干预。
- Fabric.js 下关闭前调用
canvas.clearContext(canvas.contextTop)清除顶层临时绘图层 - Konva 中可在
stage.on('mousedown', ...)里记录起点，mouseup时判断是否为有效涂鸦再提交；否则丢弃 - 避免在
drawingMode = false后立刻canvas.renderAll()，可能闪屏；建议用requestAnimationFrame延迟一帧 - 移动端要注意 touchstart/touchend 事件替代 mousedown/mouseup，否则按钮在 iOS 上点不灵
不同库的 drawingMode 行为差异必须明确
Fabric.js 和 Konva 都叫 drawingMode，但底层机制完全不同：Fabric 是 freeDrawingBrush 模式，Konva 是通过监听 mousemove 自建 Line 节点。混淆会导致画线断续、坐标偏移或无法撤销。
- Fabric.js 的
isDrawingMode开启后，所有鼠标移动都会生成点，自动连成路径；关掉就停笔 - Konva 的
stage.set({ drawingMode: true })只是开关标志，实际画线逻辑得自己写on('mousemove', () => { line.points([...]) }) - 两者都不支持原生 SVG 的
path直接编辑，想做橡皮擦得另起 layer 或用globalCompositeOperation = 'destination-out' - 缩放画布时，Fabric 默认重绘自由画笔路径，Konva 需手动调用
line.scale({ x: s, y: s })，否则线条粗细失真
mousemove 回调，最终卡顿甚至崩溃。动手前先确认当前有没有活跃的绘图监听，再决定是复用还是重建。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
