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

用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的层叠和圆角也能实现同心圆,所以两种方式对比那个好?(纯属个人好奇)

最终想实现的是这样:
图片说明

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可以为每个元素单独绑定事件。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐