内线不能从画布中的圆圈中删除

Question

现在我正在玩帆布及其功能，但是我遇到了一个奇怪的问题。我目前正试图在由几个“lineTo's”组成的三角形内绘制一个圆。我的问题是当我刚刚实施一个弧;它画出圆圈，但是从中心向外并向右侧（角度0）向外画一条线。如果我把我的弧封装在beginPath和closePath中，它会完美地绘制它，但三角形消失（提供了JSFiddle）。为什么会发生这种情况，我是否在做特别错误的事情？我是Canvas的新手，我想学习，先谢谢你！

的jsfiddle https://jsfiddle.net/720hg2aq/1/

// Draw Triangle 
ctx.moveTo((width*0.4), (height*0.05)); 
ctx.lineTo((width*0.6), (height*0.05)); 

ctx.moveTo((width*0.6), (height*0.05)); 
ctx.lineTo((width*0.5), (height*0.15)); 

ctx.moveTo((width*0.5), (height*0.15)); 
ctx.lineTo((width*0.4), (height*0.05)); 

ctx.moveTo((width*0.5), (height*0.09)); 
// End of Triangle 

// Begin Circle 
ctx.beginPath(); 
ctx.arc((width*0.5), (height*0.09), 20, 0 , 2 * Math.PI); 
ctx.closePath(); 
// End Circle 

// Draw it out 
ctx.strokeStyle = '#000'; 
ctx.stroke(); 

Answer 1

beginPath()该方法开始的路径，或者重置电流路径。

一旦你开始的路径，使用moveTo()，lineTo()，quadricCurveTo()，bezierCurveTo()，arcTo()，或arc()使路径，然后storke()它。

因此，代码应该是：

ctx.strokeStyle = "black"; 

// Draw Triangle 
ctx.beginPath(); /// Let's start the work! 
ctx.moveTo((width*0.4), (height*0.05)); 
ctx.lineTo((width*0.6), (height*0.05)); 

ctx.moveTo((width*0.6), (height*0.05)); 
ctx.lineTo((width*0.5), (height*0.15)); 

ctx.moveTo((width*0.5), (height*0.15)); 
ctx.lineTo((width*0.4), (height*0.05)); 

ctx.moveTo((width*0.5), (height*0.09)); 
ctx.stroke(); /// Brushing with your dye!! 
// End of Triangle 

// Begin Circle 
ctx.beginPath(); /// Let's start the **NEW** work! 
/// Don't let the previous path be connected with the current path! 
ctx.arc((width*0.5), (height*0.09), 20, 0 , 2 * Math.PI); 
ctx.closePath(); 
ctx.stroke(); /// Brushing with your dye!! 
// End Circle