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

代码如下:

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时,绘制效果如下:
image.png
使用fill时,填充效果如下:
image.png
它只填充了一小块,为什么这样?fill填充的不是stroke包围起来的路径?

阅读 2.7k
2 个回答

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();
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题