如何删除HTML Canvas中多个圆形间的多余连线？

嘿，作为HTML初学者能自己尝试实现布朗运动的绘制部分已经很棒啦！你遇到的多余线条问题其实是Canvas路径绘制的一个常见小坑，我来帮你搞定它～

问题原因 #

Canvas的绘图是基于**路径（Path）**的，你现在的代码里只在最后调用了一次ctx.stroke()，但循环里的400个arc()都被添加到了同一个路径中。Canvas会自动把路径中所有图形的端点连接起来，这就导致了那些多余的线条。

修复方案 #

只需要在每次绘制圆形前，调用ctx.beginPath()来开启一条新的独立路径，这样每个圆形都是单独的路径，就不会被互相连接了。同时我们可以把stroke()放到循环里，确保每个圆形都被单独绘制出来。

修正后的代码如下：

<!DOCTYPE html> 
<head> 
<meta charset="utf-8" /> 
<title>Canvas </title> 
</head> 
<body> 
<canvas id="canvas" width="800" height="500" style="border:1px solid #000000;"> 
Sorry, your browser can't support this canvas 
</canvas> 
<script> 
function draw() { 
  var canvas = document.getElementById("canvas"); 
  var ctx = canvas.getContext("2d"); 
  let i = 0; 
  while (i<400){ 
    // 每次绘制新圆前开启新路径，避免和之前的图形连接
    ctx.beginPath();
    // 简化随机坐标计算：确保圆不会超出画布边界（半径4，所以x范围4~796，y范围4~496）
    const x = Math.random() * (800 - 8) + 4;
    const y = Math.random() * (500 - 8) + 4;
    ctx.arc(x, y, 4, 0, 2 * Math.PI); 
    ctx.stroke(); // 绘制当前路径的圆形
    i++; 
  } 
} 
draw(); 
</script> 
</body>

给你的小提示 #

• beginPath()是Canvas绘图中非常重要的方法，每次需要绘制独立的图形时都应该调用它，避免路径混乱。
• 你之前的随机坐标计算可以简化：因为圆的半径是4，为了不让圆超出画布边框，x的取值范围应该是4到800-4=796，所以可以写成Math.random()*(796-4)+4，也就是代码里的Math.random()*(800-8)+4（8是直径）。
• 如果后续要给圆形填充颜色，可以用ctx.fill()，记得在fill()前也确保路径是独立的哦。

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