Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

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包围起来的路径?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...