toile dessiner 2 cercle à l'intérieur ensemble

Question

im essayant de dessiner 2 cercle qui sont à l'intérieur ensemble

mais le navigateur dessiner une ligne supplémentaire dans le deuxième cercle pourquoi?

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

Ceci est parce que la méthode arc attirera automatiquement le lineTo entre votre x courant et les positions y et le début du dessin arc (ici 100, 100.

Depuis arc dessin commence à 3 heures de l'arc tiré lorsque startAngle param est réglé sur 0, vous voulez changer votre moveTo(100, 100) à moveTo(arcX + arcRadius, arcY) ie 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>

Mais vous pouvez également remarquer que lorsque vous appelez une seconde fois stroke(), le premier est également redessinée, cette fois avec l'ensemble lineWidth à 20.
Pour éviter cela, appelez ctx.beginPath après avoir dessiné le premier cercle afin que le contexte sache que vous définissez un nouveau chemin et que vous ne continuez pas le chemin en cours. Et là, vous ne même pas besoin du moveTo plus:

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>