for 루프를 사용하여 HTML5 Canvas Circle 그리기

Question

for 루프를 사용하여 원을 그리려합니다. 마지막으로 원을 그리는 것이 좋을뿐입니다. 예제를 보려면 jsfiddle을 참조하십시오.

두 번째 'for'루프에서 마지막으로 context.stroke(); 을 주석 처리하면 원이 올바르게 표시됩니다. 내가 그걸두면 마지막 줄이 이중으로 그려져 대담 해집니다.

내가 뭘 잘못하고 있니?

켄

Answer 1

중복은 원 뒤에서 그리는 내선으로 인해 발생합니다. 루프 마지막에 context.beginPath() 호출을 추가 :

for(var j = 0; j < circle_Count + 1; j++) { 
    context.beginPath(); 
    ... 

Answer 2

근무 바이올린 : 당신은 길을 닫아야 할 http://jsfiddle.net/kwwqw5n2/3/

.

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
var box_Height = 50; 

// Make Top Rect 
context.fillStyle = "#F3E2A9"; 
context.fillRect(1, 1, canvas.width-1, box_Height-1); 
context.strokeRect(0.5, 0.5, canvas.width-1, box_Height); 

//Define the circles 
var centerY = 25; 
var radius = 10; 
var circle_Count = 3; 
var distance_Between = canvas.width/(circle_Count+1); 

//Draw three white circles. 
for(var i=0;i<circle_Count;i++){ 
    context.beginPath(); 
    context.arc(distance_Between * (i+1), centerY, radius, 0, 2 * Math.PI, true); 
    context.fillStyle = 'white'; 
    context.lineWidth = 1; 
    context.strokeStyle = '#000000'; 
    context.fill(); 
    context.stroke(); 
    context.closePath(); 
} 
//Define the Extension Lines 
var Ext_Line_Start_X = 0; 
var Ext_Line_Start_Y = box_Height + 4; //The plus is the Gap 
var Ext_Line_Length = 60; 

//Draw Extension Lines 
for(var j=0;j<circle_Count+1;j++){ 
    context.beginPath(); 
    context.moveTo(distance_Between * j + 0.5, Ext_Line_Start_Y); 
    context.lineTo(distance_Between * j + 0.5, Ext_Line_Start_Y + Ext_Line_Length); 
    context.stroke(); 
    context.closePath(); 
}