Canvas绘制自定义形状：路径命令集的封装及应用

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() 后忘记后续绘制——函数应保持“原子性”，要么完成整套路径+渲染，要么只返回路径定义