使用for循環繪制HTML5畫布圓

Question

我正在嘗試使用for循環繪制圓圈。 接受兩次都可以畫最后一個圓，效果很好。 有關示例，請參見此jsfiddle 。

如果我注釋掉最后一個context.stroke(); 在第二個“ for”循環中，圓圈正確顯示。 如果我將其保留在其中，則double會繪制最后一個圓圈，使其看起來加粗。

我究竟做錯了什么？

肯

Answer 1

重復是由您在圓圈之后繪制的尺寸界線引起的。 在最后一個for循環中添加一個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();
}