Canvas API绘制3/4圆形异常：如何实现扇形而非弓形？

你当前的代码仅调用arc()绘制圆弧，填充时Canvas会直接将圆弧的起点和终点用直线连接，因此得到的是弓形。要实现扇形，需要让路径闭合为圆心→圆弧起点→圆弧终点→圆心的完整形状。

修改后的代码 #

const canvas = document.querySelector('.canvas');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

const ctx = canvas.getContext('2d');

ctx.beginPath();
// 将路径起点移动到圆心
ctx.moveTo(100, 100);
// 绘制指定范围的圆弧
ctx.arc(100, 100, 50, 0, Math.PI * 3 / 2, false);
// 闭合路径，自动将圆弧终点与圆心连接
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();

核心原理 #

• moveTo(100,100)：把画笔定位到圆心，作为路径的起始点
• arc()：绘制从0到3/2π的圆弧，路径从圆心延伸至圆弧起点，再沿圆弧走到终点
• closePath()：自动将当前路径的终点（圆弧结束点）和起点（圆心）用直线连接，形成闭合的扇形区域，此时填充就能得到完整的3/4圆形。

你也可以用lineTo(100,100)替代closePath()，手动将终点连回圆心，效果完全一致。

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