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个Bubble对象，然后我在x和y（随机）位置绘制了一个弧线，但它显示了连接它们的线条：

Output of code

运行代码时，它会随机生成8个不同的位置，并在其位置绘制8个弧，但它会显示连接它们的线。有没有办法隐藏或摆脱这些线？我在每次抽奖后试图清理画布，但是隐藏了整个画面，包括圆圈。我一整天都在搜索，但我找不到具体问题的答案。答案可能很明显，但由于我的经验不足，我似乎无法找到解决方案。

Answer 1

在ctx.beginPath()之前致电arc()以绘制单独的实体？

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

2 个答案: