キャンバスのjavascriptのクリアパス

Question

私はキャンバスのプログラミングをテストしていますが、新しいパスを描くときに以前のパスをクリアする方法について質問があります。

例： 塗りつぶされた円は、ストロークとストロークラインで塗りつぶされます。

graphicContext.save(); 
graphicContext.beginPath(); 
graphicContext.arc(95,50,40,0,2*Math.PI); 
graphicContext.fillStyle="rgb(50, 200, 200)"; 
graphicContext.fill(); 
graphicContext.restore(); 

graphicContext.save(); 
graphicContext.moveTo(0,0); 
graphicContext.lineTo(200,100); 
graphicContext.stroke(); 
graphicContext.restore(); 

しかし、円とラインの両方を撫でている： は、私は、次のコードを持っています。どのようにして円を撫でることなく行をストロークさせることができますか？

Answer 1

まず、saveとrestoreメソッドを使用する必要はありません。

次に、新しいパスを作成するときに、線を描画する前にbeginPathメソッドを使用します。 beginPathは...前のパスをクリア/リセットされます

var graphicContext = document.querySelector('#canvas').getContext('2d') 
 

 
// circle 
 
graphicContext.beginPath(); 
 
graphicContext.arc(95,50,40,0,2*Math.PI); 
 
graphicContext.fillStyle="rgb(50, 200, 200)"; 
 
graphicContext.fill(); 
 

 
// line 
 
graphicContext.beginPath(); 
 
graphicContext.moveTo(0,0); 
 
graphicContext.lineTo(200,100); 
 
graphicContext.stroke();

<canvas id="canvas"></canvas>