Canvas绘制多边形需用beginPath()、moveTo()、lineTo()和closePath()定义封闭区域，顶点顺序影响填充方向，推荐统一顺时针或逆时针排列；closePath()自动连线至起点并重置当前点，不应手动重复lineTo()回起点；动态生成时应将顶点存数组，循环构建路径后调用closePath()再fill()/stroke()。
Canvas 绘制多边形，核心在于正确使用 beginPath()、moveTo()、lineTo() 和 closePath()，关键不是“画几条线”，而是“如何定义一个封闭区域”。
多边形顶点顺序决定填充方向与形状
Canvas 按照顶点的连接顺序依次绘制线段。只要顶点坐标明确，无论顺时针还是逆时针，都能构成视觉上的多边形；但填充规则（如非零环绕规则）会受方向影响——尤其当多边形自相交或嵌套时。实际开发中建议统一按顺时针或逆时针排列，避免意外镂空。
示例：绘制正五边形时，用极坐标计算 5 个等间隔角度下的坐标点，再按角度升序逐个 lineTo()，自然形成凸多边形。
闭合路径不等于自动首尾连线
closePath() 的作用是：从当前绘图位置向路径起始点（即 moveTo() 的坐标）绘制一条直线，并将当前点重置为起始点。它不会修改已有路径点，也不检查是否已存在首尾连线。
立即学习“前端免费学习笔记（深入）”；
常见误区：
- 只调用
lineTo()连完所有顶点，但忘记closePath()→ 路径未闭合，fill()仍可生效（Canvas 自动闭合），但stroke()缺少最后一条边 - 手动用
lineTo(x0, y0)回到起点，再调closePath()→ 实际多画了一条重复线段，可能加粗描边 - 多个子路径共用一个
beginPath()，中间未重置起点 →closePath()闭合的是最近一次moveTo()的位置，而非预期顶点
动态生成多边形路径的推荐写法
把顶点存为数组，用循环构建路径，确保逻辑清晰、不易出错：
（假设 这样既避免手算首尾连线，也兼容任意数量顶点（三角形、星形、不规则轮廓均可）。 Canvas 的 调试技巧：临时加上 points = [[x0,y0], [x1,y1], ..., [xn,yn]]</font></p>
<ul>
<li>调用 <code>ctx.beginPath()
ctx.moveTo(points[0][0], points[0][1]) 设起点points.slice(1)，对每个点执行 ctx.lineTo(x, y)
ctx.closePath() —— 此时自动连回 points[0]
ctx.fill() 和/或 ctx.stroke()
填充与描边的路径状态依赖关系
fill() 和 stroke() 都作用于“当前路径”。若在 closePath() 后又调用了 moveTo() 或 lineTo()，路径被延长，closePath() 效果可能被覆盖。务必保证 fill/stroke 在路径构建完成且未被干扰后立即调用。ctx.stroke() 查看路径轮廓，确认闭合是否符合预期；再叠加 fill() 观察颜色覆盖范围。
