canvas绘制复杂图标的核心是用path2d封装路径、分层控制填充与描边、利用变换实现缩放旋转定位、通过ispointinpath进行精准命中检测。
Canvas 绘制复杂图标，核心在于用路径精准定义轮廓、用填充与描边控制视觉表现，而不是堆砌多个简单图形。关键不是画得多，而是路径组织得清、复用得巧、样式控得稳。
用 Path2D 封装图标路径，避免重复书写
把图标逻辑从绘制过程里抽出来，单独封装成 Path2D 实例，后续只需调用 fill() 或 stroke() 即可复用：
- 用 SVG 字符串初始化最简洁，适合设计师交付的图标（如
new Path2D('M10 20 L30 20 Q40 20 40 30 L40 50 Q40 60 30 60 Z')） - 用 Canvas 方法动态构建更灵活，适合带参数的图标（比如不同尺寸的开关按钮、状态指示器）
- 所有封装好的图标建议统一存入 Map 或对象中，按 name 索引，例如
icons.get('checkmark')
填充与描边要分层控制，别混在一起
一个图标常需多层视觉：外框描边、主体填充、高光/阴影等。每层应独立绘制，避免用单一 fill() 覆盖全部：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 先设置
ctx.fillStyle填主体色，调用ctx.fill(iconPath) - 再设
ctx.strokeStyle和ctx.lineWidth，调用ctx.stroke(iconPath) - 若需内发光或叠加效果，可用
ctx.globalCompositeOperation = 'lighter'或临时 canvas 合成
支持缩放、旋转与定位，靠变换而非重绘
图标在 UI 中位置和大小常变，但路径本身不变。用 ctx 变换能力实现适配，不改路径代码：
- 用
ctx.save()+ctx.translate(x, y)定位图标原点 - 用
ctx.scale(sx, sy)缩放，注意坐标系翻转时 y 方向可能需取反 - 用
ctx.rotate(angle)实现旋转，记得ctx.restore()清理状态 - 避免直接修改路径点坐标——那是维护噩梦
加交互反馈？用命中检测代替坐标硬算
点击图标触发操作时，别靠手算矩形范围判断，用 Path2D 自带能力更准：
- 调用
ctx.isPointInPath(iconPath, x, y)判断鼠标是否落在图标路径内 - 对带镂空或曲线的图标（如齿轮、云朵），比 boundingRect 更可靠
- 结合
ctx.addPath()可合并多个子路径做整体检测
