Canvas路径绘制需实现路径生成过程的可监听、可中断、可回退，起点由用户点击触发并转换坐标确定，拖动时节流追加顶点，松开后校验≥3顶点且首尾不重合再闭合填充；支持预览渲染、撤销编辑及evenodd填充模式切换。
Canvas 路径绘制与图形填充的交互设计，核心在于“路径定义”与“用户动作”的精准耦合——不是画完再响应，而是让路径生成过程本身可监听、可中断、可回退，同时填充行为能随交互状态实时切换。
路径起点必须由用户触发确定
不能预先写死 moveTo 坐标。点击画布时获取 clientX/clientY，转为 canvas 坐标系后调用 ctx.moveTo(x, y)，这既是路径起点，也是交互锚点。若用户拖动鼠标，后续 lineTo 应持续追加顶点；若松开鼠标，则自动 closePath 并准备填充或描边。
- 监听 mousedown 获取起点，mousemove 追加顶点（需节流防卡顿）
- 避免在未 beginPath() 前调用 moveTo，否则可能延续上一路径残留状态
- 移动端需兼容 touchstart/touchmove，并注意 preventDefault 防止页面滚动干扰
填充逻辑要区分“即时预览”与“确认提交”
用户拖动过程中，应实时绘制半透明轮廓（stroke + fillStyle 设为 rgba(0,0,0,0.1)），但不真正 fill；只有在用户明确释放鼠标（mouseup 或 touchend）且顶点数 ≥3 时，才执行正式 fill() 或 stroke()，并把该图形存入图层数据结构中。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 预览阶段用 stroke() + 低透明度 fill() 模拟填充效果，视觉反馈更自然
- 正式渲染前校验：顶点数组长度 ≥3，且首尾坐标不重合（避免退化为线段）
- fill() 和 stroke() 必须紧接在 closePath() 后调用，中间不可插入其他 beginPath()
支持撤销与顶点编辑的路径管理
每次完整路径（从 mousedown 到 mouseup）应作为一个独立 Path 对象保存，包含顶点数组、fillStyle、strokeStyle、lineWidth 等元数据。撤销操作不是清空 canvas，而是移除最后一条路径对象，再重新遍历剩余路径逐个重绘。
- 每个路径对象自带 isClosed 标志，方便后续编辑（如拖拽某顶点时只更新对应坐标）
- 双击某条已绘制图形时，提取其顶点并激活编辑模式：显示控制点、允许拖动顶点、按 Delete 删除选中顶点
- 编辑状态下，moveTo/lineTo 不直接作用于 canvas，而是更新内存中的顶点数组，实时重绘预览
填充规则影响复杂图形表现
当路径含自交或嵌套子路径（如五角星内部镂空），默认非零环绕规则（non-zero winding rule）可能导致意外填充区域。此时需显式调用 ctx.fill('evenodd') 切换填充模式，或拆分为多个独立路径分别 fill。
- 五角星常用做法：外轮廓顺时针绘制，内五边形逆时针绘制，配合默认 non-zero 规则实现镂空
- 图标类图形建议统一使用 evenodd 模式，逻辑更直观，不易出错
- fill() 会自动闭合未闭合路径，但 stroke() 不会——交互中若仅描边，务必确保 closePath() 已调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
