Canvas多边形填充需先定义路径、再闭合、最后显式fill()，核心是确保路径封闭；fill()依赖ctx.fillStyle设置颜色、渐变或图案，且不处理边框，描边需单独调用stroke()。
Canvas 中做多边形填充，核心是「先定义路径、再填充区域」，不是画完线就自动填上，必须显式调用 fill() 并确保路径闭合（或逻辑上构成封闭区域）。
关键三步：路径 → 闭合 → 填充
多边形填充依赖路径（path）的完整性。Canvas 不识别“多边形”这个概念，只认你画出的一条首尾相连的封闭路径。
- beginPath()：清空旧路径，开启新路径绘制
- moveTo(x, y)：把“画笔”移到第一个顶点（不画线）
- lineTo(x, y)逐个连接其余顶点（画线段）
- closePath()：自动连线回起点，形成封闭路径（强烈建议显式调用，避免意外缺口）
-
fill()：用当前
fillStyle填满路径内部（自动隐式调用closePath，但依赖路径可判定为封闭；显式调用更可靠）
填充颜色与样式设置
填充效果由 ctx.fillStyle 决定，支持多种值：
- 纯色：
ctx.fillStyle = '#ff6b35'或'rgb(255, 107, 53)' - 渐变：
ctx.fillStyle = ctx.createLinearGradient(...)或createRadialGradient(...) - 图案：
ctx.fillStyle = ctx.createPattern(image, 'repeat')
注意：fill() 只影响填充，不影响边框；如需描边，单独设置 strokeStyle 并调用 stroke()。
立即学习“Java免费学习笔记（深入）”；
常见易错点
填充失败往往不是代码写错，而是路径没真正封闭或坐标顺序出问题：
- 顶点少于 3 个 → 无法构成多边形，
fill()无效（无区域可填） - 忘记
beginPath()→ 新路径叠加在旧路径上，可能干扰填充判断 - 使用
moveTo()跳转后未重连 → 路径被拆成多个不连通片段，fill()只填最后一段围成的区域 - 坐标全是 NaN 或 undefined → 路径断裂，填充失效（控制台无报错，但画面空白）
一个可复用的填充函数示例
传入顶点数组（如 [[100,50],[150,80],[120,120]]），自动完成路径构建与填充：
function fillPolygon(ctx, points, color = '#000') {
if (points.length < 3) return;
ctx.beginPath();
ctx.moveTo(points[0][0], points[0][1]);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i][0], points[i][1]);
}
ctx.closePath(); // 显式闭合
ctx.fillStyle = color;
ctx.fill();
}
调用：fillPolygon(ctx, [[50,50],[150,50],[100,120]], 'lightblue');
