Canvas 绘制多边形和星形的核心是用数学逻辑生成顶点坐标再连接绘制；掌握路径构建、角度计算和方向控制三点，即可稳定实现任意边数、旋转及填充样式的图形。
Canvas 绘制多边形和星形，核心不是“一笔一画硬编码”，而是用数学逻辑生成顶点坐标，再用路径 API 连接绘制。只要掌握路径构建、角度计算和方向控制这三点，任意边数、任意旋转、带空心或填充的复杂图形都能稳定实现。
正多边形：用三角函数算顶点
正 n 边形所有顶点均匀分布在圆周上。给定中心点 (cx, cy)、半径 r 和起始角 startAngle，第 i 个顶点坐标为：
- x = cx + r × cos(startAngle + i × 2π / n)
- y = cy + r × sin(startAngle + i × 2π / n)
代码示例（绘制正五边形）：
ctx.beginPath();
const n = 5, r = 80, cx = 200, cy = 150;
for (let i = 0; i < n; i++) {
const angle = Math.PI / 2 + i * 2 * Math.PI / n; // 从顶部开始
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();星形（如五角星）：交错连接顶点
星形本质是正多边形顶点按固定步长（非相邻）连接形成的闭合路径。五角星常用步长 2（即跳过一个顶点）：
立即学习“前端免费学习笔记（深入）”；
- 先生成 10 个等分点（5 个外顶点 + 5 个内顶点），或更简单——只生成 5 个外顶点，再按 i → (i + 2) % 5 的顺序连线
- 关键在 顶点顺序决定填充区域：顺时针画外轮廓、逆时针画内轮廓时，非零环绕规则会让中间被“挖空”
- 若想实心五角星，统一按同一方向（如顺时针）连接全部 5 个外顶点即可
简版实心五角星（复用上面五边形顶点，改连线顺序）：
ctx.beginPath();
for (let i = 0; i < 5; i++) {
const angle = Math.PI / 2 + i * 2 * Math.PI / 5;
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill(); // 自动闭合并填充复杂不规则多边形：手动定义顶点或动态生成
不规则图形依赖明确的顶点数组，适合从数据源读取或用户交互生成：
- 顶点可存为 [[x1,y1], [x2,y2], …] 形式，遍历调用 moveTo/lineTo
- 支持曲线边：在顶点间插入 quadraticCurveTo 或 bezierCurveTo 替代 lineTo
- 注意调用 beginPath() 清空前序路径；closePath() 非必须，但 fill() 会自动闭合未闭合路径
- 避免路径残留：每次绘制新图形前务必调用 beginPath()，否则旧路径可能被重复描边/填充
样式与细节控制
填充和描边效果直接影响视觉质量：
- fillStyle 支持纯色、渐变（createLinearGradient）、图案（createPattern）
- strokeStyle 和 lineWidth 控制边框颜色与粗细
- 抗锯齿：默认开启，若需像素级锐利边缘（如游戏像素风），可设置 ctx.imageSmoothingEnabled = false，并确保坐标对齐整数像素
- Retina 屏适配：用 window.devicePixelRatio 缩放 canvas 的 display CSS 尺寸，同时放大绘图表面 width/height
