如何在HTML Canvas中实现类似Windows画图的指定区域填色

嘿，我懂你想要的效果——就像Windows画图里那样，给每个被辐射线切出来的封闭圆环块填上不同颜色对吧？你之前的代码都是用stroke描边，没法直接填充封闭区域，得换个思路：把每个分段区域单独构建成封闭路径，然后填充它。

核心思路 #

每个封闭的圆环分段其实由四个部分组成：

1. 外层圆环的一段圆弧
2. 从外层圆弧端点到内层圆弧端点的辐射线
3. 内层圆环的一段反向圆弧（用来和外层圆弧闭合）
4. 从内层圆弧端点回到外层圆弧起点的辐射线

把这四部分连起来就是一个完整的封闭路径，之后直接用fill()就能给区域上色了。

修改后的实现代码 #

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// 基础参数设置
const centerX = 150;
const centerY = 150;
// 圆环半径数组（从外到内排列）
const ringRadii = [50, 40, 30];
// 分割角度数组（最后补2π来闭合最后一段）
const angles = [0.5, 1, 1.5, 2, 2.5, 3, 2 * Math.PI];
// 自定义分段配色数组
const colors = ["#FF00FF", "#990000", "#0099CC", "#FFFF00", "#00FF00", "#FF9900", "#663399"];

// 遍历每一层圆环（外层到内层）
for (let i = 0; i < ringRadii.length - 1; i++) {
  const outerRadius = ringRadii[i];
  const innerRadius = ringRadii[i + 1];
  
  // 遍历每个角度分段
  for (let j = 0; j < angles.length - 1; j++) {
    const startAngle = angles[j];
    const endAngle = angles[j + 1];
    // 循环取色，避免颜色不够用
    const color = colors[(i * angles.length + j) % colors.length];
    
    context.beginPath();
    // 1. 绘制外层圆弧
    context.arc(centerX, centerY, outerRadius, startAngle, endAngle);
    // 2. 连线到内层圆弧的终点
    context.lineTo(
      centerX + innerRadius * Math.cos(endAngle),
      centerY + innerRadius * Math.sin(endAngle)
    );
    // 3. 反向绘制内层圆弧（逆时针，最后一个参数传true）
    context.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
    // 4. 连线回外层圆弧起点，闭合路径
    context.lineTo(
      centerX + outerRadius * Math.cos(startAngle),
      centerY + outerRadius * Math.sin(startAngle)
    );
    
    // 设置填充色并填充
    context.fillStyle = color;
    context.fill();
    // 可选：给每个区域加黑色边框，更贴近画图效果
    context.strokeStyle = "#000";
    context.lineWidth = 1;
    context.stroke();
  }
}

关键细节说明 #

• 用数组管理半径、角度和颜色，不仅代码更简洁，还能轻松调整圆环层数、分割数量和配色
• 绘制内层圆弧时传true表示逆时针绘制，这是让路径闭合的关键
• 每个分段单独调用beginPath()，避免不同路径互相干扰
• 可选的stroke()可以给区域加上边框，和Windows画图的填充视觉效果更一致

这样改完之后，每个封闭的圆环分段都会被填上不同颜色，完全符合你想要的效果啦！

内容的提问来源于stack exchange，提问作者Wai Yan Hein