canvas绘制自定义形状需严格遵循路径四步：beginpath()、moveto()+绘制命令、closepath()（推荐）、stroke()/fill()；封装路径函数而非直接渲染，支持灵活样式控制，并注意上下文状态管理。
Canvas绘制自定义形状，核心在于路径命令的组织与复用。直接写一堆moveTo、lineTo容易出错、难维护，把常用路径逻辑封装成函数或类，既能提升开发效率，又能保证图形一致性。
路径命令必须成套使用
Canvas不维护“当前图形状态”，每次绘图都依赖显式路径指令。关键四步不能省：
- beginPath()：清空上一条路径，避免意外连接
- moveTo() + 绘制命令（lineTo / arc / quadraticCurveTo 等）：定义形状轮廓
- closePath()（可选但推荐）：显式闭合，尤其对 stroke 更可靠；fill 会自动闭合，但行为不可控
- stroke() 或 fill()：真正渲染，且只作用于当前路径
常见自定义形状的封装方式
把坐标、尺寸、圆角等参数抽象出来，让调用像画一个内置矩形一样简洁：
-
圆角矩形：用
arcTo()或四段lineTo()+ 四个arc()实现；封装时传入x, y, width, height, radius -
三角形/多边形：接收顶点数组
[[x1,y1], [x2,y2], ...]，循环调用lineTo()，首尾自动闭合 - 带方向的箭头：基于线段起点、终点、箭头长度和角度，动态计算箭头两个端点，拼成五点路径
-
心形/星形等数学曲线：用参数方程生成点序列，再连成路径；适合封装为
heartPath(centerX, centerY, size)这类函数
封装建议：用函数返回路径，而非直接绘制
更灵活的做法是让封装函数只构造路径，不执行 stroke 或 fill —— 把样式控制权留给调用方：
- 函数返回
true表示路径已定义好，或返回路径点数组便于调试 - 调用时统一做样式设置：
ctx.strokeStyle = '#666'; ctx.lineWidth = 2;，再调用stroke() - 这样同一个形状能轻松切换描边、填充、虚线、渐变填充等多种效果
注意上下文状态的干扰
Canvas 2D 上下文是共享状态机，封装函数内部别擅自改 fillStyle 或 globalAlpha，除非明确设计为“带样式的完整绘制”：
- 若封装中设置了颜色，记得保存并恢复：
ctx.save(); ... ctx.restore(); - 批量绘制多个同类型图形时，先统一设置样式，再循环调用路径函数 +
stroke()，比每个都 save/restore 更高效 - 避免在封装里调用
beginPath()后忘记后续绘制——函数应保持“原子性”，要么完成整套路径+渲染，要么只返回路径定义
