Canvas是唯一可行的底层方案，因其在实时协作、笔迹平滑性与性能压测下表现稳定；必须手动处理事件节流、坐标归一化、路径压缩和上下文重置以解决卡顿、断笔、偏移问题；需检查getContext('2d')是否返回null并fallback，避免静默失败；移动端须校验CSS缩放导致的坐标扭曲；必须同时监听鼠标与触控事件并阻止默认行为；擦除应使用'destination-out'合成模式而非画白色；导出时需适配跨域、Retina屏及透明背景。
Canvas 是唯一可行的底层方案，其他方式（如 SVG、div 堆叠）在实时协作、笔迹平滑性、性能压测下都会崩。 你不需要框架封装，但必须亲手处理事件节流、坐标归一化、路径压缩和上下文重置——这些才是白板卡顿、断笔、偏移的真正根源。
为什么 canvas.getContext('2d') 必须手动检查并 fallback
不是所有环境都默认支持 2d 上下文：iOS Safari 旧版本可能返回 null；某些企业内网浏览器禁用硬件加速后 getContext 会静默失败；PWA 模式下部分 WebView 会延迟初始化。不检查就直接调用 stroke() 会导致整个绘图逻辑静默中断，且无错误抛出。
- 永远用
if (!context) { console.error('2D context not available'); return; }包裹后续逻辑 - 不要依赖
canvas.getContext('2d') || canvas.getContext('webgl')—— WebGL 不能替代 2D 绘图语义 - 移动端需额外判断
canvas.width和canvas.height是否被 CSS 缩放扭曲（用getBoundingClientRect()校验）
ev_canvas 事件处理器里最容易漏掉的三件事
几乎所有公开示例都只监听 mousedown/mousemove/mouseup，但真实场景中这会导致触摸屏断笔、缩放后坐标错乱、快速拖拽丢帧。
- 必须同时监听
touchstart/touchmove/touchend，且用ev.preventDefault()阻止默认滚动行为 - 所有坐标必须从
ev.clientX / ev.clientY转换为 canvas 内部坐标：const rect = canvas.getBoundingClientRect(); const x = (ev.clientX - rect.left) * (canvas.width / rect.width); - 对
mousemove和touchmove做requestAnimationFrame节流，否则高频触发会堆积未绘制路径，造成明显延迟
橡皮擦不是“画白色”，而是用 globalCompositeOperation = 'destination-out'
用 strokeStyle = '#ffffff' 擦除本质是覆盖，会破坏底层透明度、混合模式或已叠加的图片图层；协作场景下还会让服务端同步时误判为新笔迹。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 擦除前设
context.globalCompositeOperation = 'destination-out'; - 擦除后立刻恢复
context.globalCompositeOperation = 'source-over';，否则后续绘制全失效 - 注意：Safari 对
destination-out在非 opaque canvas 上有渲染 bug，需确保canvas.style.background = '#fff'或提前 fill 白底 - 橡皮尺寸不能只靠
lineWidth控制——要配合shadowBlur+shadowColor = 'rgba(0,0,0,0)'实现软边，否则硬边擦除感极强
保存/导出画布时 toDataURL() 的两个隐形陷阱
导出 PNG 看似简单，但实际部署中常因跨域图片、高 DPI 屏幕、透明通道处理不当导致空白、模糊或黑底。
- 若画布含
drawImage()加载的远程图片，必须确保该图片响应头含Access-Control-Allow-Origin: *，否则toDataURL()抛SecurityError - Retina 屏上直接调用会模糊：需先将
canvas.width/canvas.height放大 2 倍，再用 CSS 缩回原尺寸，否则像素被插值劣化 - 导出带透明背景的 PNG 时，
toDataURL('image/png')正确；但若要 JPG，必须先创建临时 canvas 并 fill 白底，否则透明区域变黑
真正的难点不在“怎么画”，而在“怎么不让它画错”——坐标没归一、事件没节流、合成模式没切回、导出没适配设备像素比，任一环节出问题，用户感知就是“白板不跟手”“一擦全花”“截图发黑”。这些细节没有银弹，只能逐项验证。
