Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

代码如下:

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
1.0k views
Welcome To Ask or Share your Answers For Others

1 Answer

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...