在 javascript 中连续绘制多个圆弧时删除线条

Question

因此，我尝试在屏幕上为我正在制作的一个简单项目绘制 8 个随机圆圈（或在本例中我称之为气泡）。我想这样做以便可以显示气泡，但是在每个气泡的 startAngle 处都有线连接它们。

<!DOCTYPE html>

<html>

<head>
     <title>Image</title>
</head>

<body>

     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
     <canvas id="canvas" width="400" height="400"></canvas>
     <script>
         var canvas = document.getElementById("canvas");
         var ctx = canvas.getContext("2d");

         var height = canvas.height;
         var width = canvas.width;


         ctx.strokeRect(0, 0, width, height);


         var bubbles = [];

         var Bubble = function () {
             this.x = Math.floor(Math.random() * width);
             this.y = Math.floor(Math.random() * height);
             this.xspeed = 5;
             this.yspeed = 5;
         };

         for (var i = 0; i < 8; i++) {
             bubbles[i] = new Bubble();
         };

         Bubble.prototype.draw = function () {
             for (var i = 0; i < 8; i++) {
             ctx.fillStyle = "Black";
             ctx.arc(bubbles[i].x, bubbles[i].y, 10, 0, Math.PI * 2, false);
             }
         };

         setInterval(function () {
             for (var i = 0; i < bubbles.length; i++) {
                 ctx.strokeStyle = "Black";
                 bubbles[i].draw();
                 ctx.stroke();
             }
         }, 30);





     </script>
 </body>

 </html>

基本上，我制作了 8 个泡泡对象，然后在它们的 x 和 y（随机）位置画了一条弧线，但它显示了连接它们的线，如下所示：

Output of code

当您运行代码时，它会随机生成 8 个不同的位置并在它们的位置绘制 8 条弧线，但它会显示连接它们的线。有没有办法隐藏或摆脱这些线？我试图在每次绘制后清除 canvas ，但这隐藏了包括圆圈在内的整个东西。我一天中的大部分时间都在寻找，但找不到我的具体问题的答案。答案可能是显而易见的，但由于我缺乏经验，我似乎无法找到解决方案。

Answer 1

在 arc() 之前调用 ctx.beginPath() 来绘制单独的实体？

Answer 2

ctx.arc() 在当前路径的最后一个坐标和圆弧的第一个位置之间创建一个 ctx.lineTo()。

所以为了避免它，你可以简单地手动调用moveTo()将绘图笔抬起到弧线的第一个位置。

这样，您可以在同一个路径和同一个 stroke 调用中绘制多个弧（当您绘制很多弧时，这会变得很有趣）

const ctx = c.getContext('2d'),
w = c.width,
h = c.height;

ctx.beginPath(); // call it once
for(let i = 0; i<100; i++){
  let rad = Math.random()*20 + 5
  let posX = rad + Math.random() * (w - rad *2);
  let posY = rad + Math.random() * (h - rad *2); 
  // our arc will start at 3 o'clock
  ctx.moveTo(posX + rad, posY); // so simply add 'rad' to the centerX
  ctx.arc(posX, posY, rad, 0, Math.PI*2);
  }
ctx.stroke(); // call it once

<canvas id="c" width="500"></canvas>

在 javascript 中连续绘制多个圆弧时删除线条

Removing lines when drawing multiple arcs in a row in javascript

javascript

geometry

canvas

lines