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() 的位置，而非预期顶点

动态生成多边形路径的推荐写法

把顶点存为数组，用循环构建路径，确保逻辑清晰、不易出错：

（假设

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()

这样既避免手算首尾连线，也兼容任意数量顶点（三角形、星形、不规则轮廓均可）。

填充与描边的路径状态依赖关系

Canvas 的 fill() 和 stroke() 都作用于“当前路径”。若在 closePath() 后又调用了 moveTo() 或 lineTo()，路径被延长，closePath() 效果可能被覆盖。务必保证 fill/stroke 在路径构建完成且未被干扰后立即调用。

调试技巧：临时加上 ctx.stroke() 查看路径轮廓，确认闭合是否符合预期；再叠加 fill() 观察颜色覆盖范围。