用canvas实现同心圆有多余的线怎么剪除？

Question

用for循环做同心圆，但是实现出来有多余的线

for(var i=0;i<5;i++){
rgb=Math.floor(Math.random()*1000000);
ctx.strokeStyle="#"+rgb;
ctx.arc(200,200,100-i*15,0,Math.PI*2,true);
ctx.moveTo(300-i*15,200);
ctx.stroke();
}

1、多余的线怎么除掉？本来以为每次画圆重新定位（moveTo）就行，但是只有最右边的短线消失了。

2、想画成实心圆的，但是用了fillstyle和fill之后，出现最外圈的圆覆盖了里面的圆。怎么实现外圈不覆盖里圈？

3、用设置div的层叠和圆角也能实现同心圆，所以两种方式对比那个好？（纯属个人好奇）

最终想实现的是这样：

Answer 1

1.每次画新的图形之前都要用ctx.beginPath();重置路径。
2.用ctx.beginPath();重置路径也就不会外圈覆盖里圈了（其实之前的不是覆盖，而是没有重置路径，新图形路径和之前图形路径叠加，每次循环所有路径都会用新的颜色重新填充。）。只要先画外圈再画里圈就好。

for(var i=0;i<5;i++){
rgb=Math.floor(Math.random()*1000000);
ctx.strokeStyle="#"+rgb;
ctx.beginPath();
ctx.arc(200,200,100-i*15,0,Math.PI*2,true);
ctx.stroke();
}

3.用div在创建之后可以随时改变div的位置，大小，颜色等属性，并且可以应用css动画效果，用canvas想要改变已画图形就只能全部清屏重画。
用div可以为每个元素单独绑定事件。