moxiao150
2019-01-07 15:36
采纳率: 75%
浏览 1.1k

用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条回答 默认 最新

  • 天际的海浪 2019-01-07 16:19

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

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题