캔버스

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>