为何我的Canvas代码中绘制的圆形之间会出现连接线？

嘿，这问题我太熟啦！你遇到的那些讨厌的连接线，根源在于没有为每个圆形开启独立的绘制路径。Canvas的2D绘图上下文是基于路径的——如果不主动创建新路径，每次调用arc()都会把当前圆弧追加到上一次的路径里，stroke的时候自然就会把这些分散的圆弧连起来啦。

具体修改方案 #

只需要在你的drawcircle方法里，调用arc()之前加上beginPath()，让每个圆形都拥有自己独立的路径就行。另外把样式设置的代码整理得更规整些会更好：

var can = document.getElementById('canvas'); 
var cn = can.getContext('2d'); 
cn.fillStyle = 'black'; 
cn.fillRect(0, 0, can.width, can.height); 

class object { 
  constructor(r,sa,ea) { 
    this.x = Math.floor(Math.random()*800); 
    this.y = Math.floor(Math.random()*600); 
    this.r = r; 
    this.sa = sa; 
    this.ea = ea; 
    console.log('object successfully created') 
  } 
  drawcircle(){ 
    // 关键：开启新路径，切断和之前路径的关联
    cn.beginPath();
    cn.strokeStyle = "white";
    cn.lineWidth = 3;
    cn.arc(this.x,this.y,this.r,this.sa,this.ea,false); 
    cn.stroke(); 
  } 
} 

// 补全你的循环逻辑
var i; 
for(i = 0 ; i < 100; i++){
  // 示例：创建完整圆形实例并绘制
  let circle = new object(10, 0, Math.PI*2);
  circle.drawcircle();
}

原理说明 #

• beginPath()会清空当前的路径列表，让接下来的绘图操作都基于一个全新的路径，这样每个圆形都是独立的绘制单元，不会被自动连接。
• 如果你画的是闭合的圆形（比如从0到2π的圆弧），还可以在stroke()前加上closePath()，让圆弧的起点和终点完美闭合，但这不是必须的——因为arc(..., 0, Math.PI*2)本身就是一个完整的圆。

内容的提问来源于stack exchange，提问作者Karambit