Javascript 使用for循环绘制HTML5画布圆

我正在尝试用for循环画圆。它工作得很好，接受它，再画最后一个圆。 看看这个例子

如果我把最后一条评论掉

context.stroke（）
在第二个“for”循环中，圆圈显示正确。如果我把它留在里面，我会画最后一个圆圈，让它看起来很醒目

我做错了什么

Ken
重复是由于在圆后绘制的尺寸界线造成的。在最后一个for循环中添加
context.beginPath（）
调用：

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

for（var j=0；j
工作小提琴：

你必须关闭路径

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();
}

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
变量箱高度=50；
//使上直
context.fillStyle=“#F3E2A9”；
context.fillRect（1,1，canvas.width-1，box\u Height-1）；
上下文。strokeRect（0.5,0.5，canvas.width-1，框高）；
//定义圆
var centerY=25；
var半径=10；
var循环计数=3；
变量距离=画布宽度/（圆圈计数+1）；
//画三个白色圆圈。
对于（var i=0；i