canvas 创建扇形路径，使用stroke可绘制出现，使用fill却填充不到。

• Z时代
• 2024-01-10
• 分类：技术分享

代码如下：

var ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.translate(100, 100);// 以（100，100）为圆心
ctx.arc(0, 0, 100, Math.PI * 30 / 180, Math.PI * 60 / 180, false);
// 画第一条线
ctx.save();
ctx.rotate(Math.PI * 30 / 180);
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.restore();
// 画第二条线
ctx.rotate(Math.PI * 60 / 180);
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
// ctx.fill();
ctx.stroke();

使用stroke时，绘制效果如下：

使用fill时，填充效果如下：

它只填充了一小块，为什么这样？fill填充的不是stroke包围起来的路径？

回答

canvas 不会自动闭合曲线，画完闭合区域之后需要调用 ctx.closePath() 把路径闭合。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.translate(100, 100);// 以（100，100）为圆心
ctx.arc(0, 0, 100, Math.PI * 30 / 180, Math.PI * 60 / 180, false);
ctx.arcTo(0, 0, 0, 0, Math.PI * 30 / 180)
ctx.fill();
ctx.stroke();

以上是 canvas 创建扇形路径，使用stroke可绘制出现，使用fill却填充不到。 的全部内容， 来源链接： utcz.com/a/58800.html