HTML Canvas Arc仅绘制圆弧外侧窄条问题求助

你的问题出在路径没有闭合为完整的扇形轮廓。当前代码仅绘制了一段圆弧，填充时只会填充圆弧与其弦围成的区域，而非从圆心出发的扇形。

修正后的代码： #

let startingLocation = {x:0,y:0};
let angle = 18.43494882292201;
let fovAngle = 30;
let r = 100;
// 转换角度为弧度
let theta = angle * (Math.PI / 180);
let theta2 = (angle + fovAngle) * (Math.PI / 180);

// 绘制扇形区域
ctx.beginPath();
ctx.fillStyle = 'green';
// 移动路径起点到圆心
ctx.moveTo(startingLocation.x, startingLocation.y);
// 绘制圆弧
ctx.arc(startingLocation.x, startingLocation.y, r, theta, theta2, false);
// 从圆弧终点连线回圆心，闭合扇形路径
ctx.lineTo(startingLocation.x, startingLocation.y);
ctx.fill();
ctx.closePath();

关键修正点： #

• 调整moveTo位置：必须放在beginPath()之后，否则会被路径重置操作忽略
• 添加lineTo(startingLocation.x, startingLocation.y)：将圆弧终点与圆心连接，形成完整的扇形闭合路径
• 遵循路径顺序：圆心 → 圆弧起点 → 圆弧终点 → 圆心，确保填充区域为完整扇形

内容的提问来源于stack exchange，提问作者Mr404servererror