キャンバスは

Question

イムは、一緒に内部

ですが、ブラウザは、なぜ第二円の内側の余分な線を描く2円を描画しようとしていますか？ arcメソッドが自動的にあなたの現在のxとyの位置と、ここ100, 100（描画アークの始まりの間lineToを描画しますので、これは

var canvas = document.getElementById('convas'); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.strokeStyle = "orange"; 
 
ctx.lineWidth = 25; 
 
ctx.arc(160, 160, 100, 0, Math.PI * 2, false); 
 
ctx.stroke(); 
 
ctx.moveTo(100, 100); 
 
ctx.arc(150, 150, 40, 0, Math.PI * 2, false); 
 
ctx.lineWidth = 20; 
 
ctx.stroke();

<div class="center"> 
 
    <canvas id="convas" style="background: grey" width="300" height="300"> 
 
    here will go report chart if you see this text it mean your browser dont support canvas! 
 
    so update your browser. 
 
</canvas> 
 
</div>

Answer 1

。

arc描画がから始まるので、 startAngleパラメータが0に設定されている場合、描画された円の3時に、moveTo(100, 100)をmoveTo(arcX + arcRadius, arcY)に変更する必要があります。 moveTo(190, 150)。

var canvas = document.getElementById('convas'); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.strokeStyle = "orange"; 
 
ctx.lineWidth = 25; 
 
ctx.arc(160, 160, 100, 0, Math.PI * 2, false); 
 
ctx.stroke(); 
 
ctx.moveTo(190, 150); 
 
ctx.arc(150, 150, 40, 0, Math.PI * 2, false); 
 
ctx.lineWidth = 20; 
 
ctx.stroke();

<div class="center"> 
 
    <canvas id="convas" style="background: grey" width="300" height="300"> 
 
    here will go report chart if you see this text it mean your browser dont support canvas! 
 
    so update your browser. 
 
</canvas> 
 

 
</div>

しかし、あなたはまた、あなたが二度目stroke()を呼び出すときに、最初のものは20からlineWidthセットで、今回も再描画されることがあります。
これを回避するには、最初の円を描いた後にctx.beginPathに電話して、新しいパスを定義していて、現在のパスを継続しないことをコンテキストが認識できるようにします。そしてここで、あなたもmoveToもう必要はありません。貴重な情報と

var canvas = document.getElementById('convas'); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.strokeStyle = "orange"; 
 
ctx.lineWidth = 25; 
 
ctx.arc(160, 160, 100, 0, Math.PI * 2, false); 
 
ctx.stroke(); 
 
ctx.beginPath(); 
 
ctx.arc(150, 150, 40, 0, Math.PI * 2, false); 
 
ctx.lineWidth = 20; 
 
ctx.stroke();

<div class="center"> 
 
    <canvas id="convas" style="background: grey" width="300" height="300"> 
 
    here will go report chart if you see this text it mean your browser dont support canvas! 
 
    so update your browser. 
 
</canvas> 
 

 
</div>