为什么形状在JavaScript画布上绘制时会相互连接？

Question

[当我在画布上绘制多个圆圈时，它们会聚在一起形成怪异的形状。我有25个“ x”和“ y”值来绘制存储在数组中的圆。我不确定这是否是因为两个或更多圆圈的“ x”和“ y”值相同。有什么办法可以防止这种情况和/或确保圆的x和y值与其他值至少相距10个？谢谢。

编辑：感谢尼克·帕森斯，我找到了解决方案。我仍然想知道是否可以检查两个或更多个“ x”或“ y”值是否彼此接近，而x（x代表数字）的数量相等，所以例如：如果两个不同的“ x”值的差小于10，在控制台中记录“太近”。

发行图片：

我的JavaScript：（我尝试添加有用的评论）

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var bubbleData = generateBubbles(); //Array the x and y values are stored in

    var bubbleDataLength = bubbleData.length;

    var bubbledataX = bubbleData[0].x;

    var bubbleDataY = bubbleData[0].y;

    var currentX;

    var currentY;

    function generateBubbles() {
        var generatedBubbleData = [];

        var bubbleCount = 0;
        var maxBubbleCount = 25;

        var bubbleX = 0;
        var bubbleY = 0;

        function yCalc() { //Function that returns the y value of each circle
            var currentY;
            var mathRandom = Math.floor(Math.random() * 101);
            if(mathRandom < 21) {
                bubbleY = 600;
            }

            if(mathRandom < 41 && mathRandom > 20) {
                bubbleY = 500;
            }

            if(mathRandom < 61 && mathRandom > 40) {
                bubbleY = 400;
            }

            if(mathRandom < 81 && mathRandom > 60) {
                bubbleY = 300;
            }

            if(mathRandom < 101 && mathRandom > 80) {
                bubbleY = 200;
            }

            return currentY;
        }

        var mathRandom = Math.floor(Math.random() * 101);

        function xCalc() { //Function that returns the x value of each circle
            var currentX;
            if(mathRandom < 26) {
                bubbleX = Math.random() * 150;
            }

            if(mathRandom < 51 && mathRandom > 25) {
                bubbleX = Math.random() * 175;
            }

            if(mathRandom < 76 && mathRandom > 50) {
                bubbleX = Math.random() * 200;
            }

            if(mathRandom > 75) {
                bubbleX = Math.random() * 250;
            }
            return currentX;
            }

            while(bubbleCount < 25) { //Only allows 25 x and y values
            currentX = xCalc();
            currentY = yCalc();


            generatedBubbleData.push({
                x: bubbleX,
                y: bubbleY
            });

            if(bubbleCount <= 25) { 
                bubbleCount++; 
                mathRandom = Math.floor(Math.random() * 101);
                xCalc(); 
            }
        }
            return generatedBubbleData;
    }

    generateBubbles();

    function draw() {
        canvas.width = window.innerWidth; // Sets canvas width and doesn't make drawings blurry
        canvas.height = window.innerHeight; // Sets canvas height and doesn't make drawings blurry
        ctx.fillStyle = "red";
        ctx.beginPath(); 
        bubbleData.forEach(function(bubbleDataItem){ //Draws the 25 circles with the stored x and y values
            ctx.arc(bubbleDataItem.x, bubbleDataItem.y, 20, 0, 2* Math.PI); // fillRect post setting size
            ctx.fill();
        })

    }

    draw();

function update(deltaTime) {
    if(!deltaTime) return;

    bubbleData.forEach(function(bubbleDataItem){
    bubbleDataItem.x += 4;
});

}



let lastTime = 0;

function gameLoop(timestamp) {
    let deltaTime = timestamp - lastTime;
    lastTime = timestamp;
    ctx.clearRect(0, 0, 800, 600);
   // bubbleData.forEach(function(bblData){ctx.clearRect(bblData.x, bblData.y, 10, 10)})

    bubbleData.forEach(function(bblData){bblData.x += 1; bblData.y -= 1;})

    update(deltaTime);
    draw();

    requestAnimationFrame(gameLoop);
}
gameLoop();

Answer 1

每次创建新圆时都需要开始路径，因此您可以像这样将ctx.beginPath()移动到for循环中：

bubbleData.forEach(function(bubbleDataItem) { 
  ctx.beginPath();
  ctx.arc(bubbleDataItem.x, bubbleDataItem.y, 20, 0, 2 * Math.PI); 
  ctx.fill();
});

请参见下面的示例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bubbleData = generateBubbles(); //Array the x and y values are stored in
var bubbleDataLength = bubbleData.length;
var bubbledataX = bubbleData[0].x;
var bubbleDataY = bubbleData[0].y;
var currentX;
var currentY;

function generateBubbles() {
  var generatedBubbleData = [];
  var bubbleCount = 0;
  var maxBubbleCount = 25;
  var bubbleX = 0;
  var bubbleY = 0;

  function yCalc() { //Function that returns the y value of each circle
    var currentY;
    var mathRandom = Math.floor(Math.random() * 101);
    if (mathRandom < 21) {
      bubbleY = 600;
    }

    if (mathRandom < 41 && mathRandom > 20) {
      bubbleY = 500;
    }

    if (mathRandom < 61 && mathRandom > 40) {
      bubbleY = 400;
    }

    if (mathRandom < 81 && mathRandom > 60) {
      bubbleY = 300;
    }

    if (mathRandom < 101 && mathRandom > 80) {
      bubbleY = 200;
    }

    return currentY;
  }

  var mathRandom = Math.floor(Math.random() * 101);

  function xCalc() { //Function that returns the x value of each circle
    var currentX;
    if (mathRandom < 26) {
      bubbleX = Math.random() * 150;
    }

    if (mathRandom < 51 && mathRandom > 25) {
      bubbleX = Math.random() * 175;
    }

    if (mathRandom < 76 && mathRandom > 50) {
      bubbleX = Math.random() * 200;
    }

    if (mathRandom > 75) {
      bubbleX = Math.random() * 250;
    }
    return currentX;
  }

  while (bubbleCount < 25) { //Only allows 25 x and y values
    currentX = xCalc();
    currentY = yCalc();


    generatedBubbleData.push({
      x: bubbleX,
      y: bubbleY
    });

    if (bubbleCount <= 25) {
      bubbleCount++;
      mathRandom = Math.floor(Math.random() * 101);
      xCalc();
    }
  }
  return generatedBubbleData;
}

generateBubbles();

function draw() {
  canvas.width = window.innerWidth; // Sets canvas width and doesn't make drawings blurry
  canvas.height = window.innerHeight; // Sets canvas height and doesn't make drawings blurry
  ctx.fillStyle = "red";
  
  bubbleData.forEach(function(bubbleDataItem) { //Draws the 25 circles with the stored x and y values
    ctx.beginPath();
    ctx.arc(bubbleDataItem.x, bubbleDataItem.y, 20, 0, 2 * Math.PI); // fillRect post setting size
    ctx.fill();
  });
  

}

draw();

function update(deltaTime) {
  if (!deltaTime) return;

  bubbleData.forEach(function(bubbleDataItem) {
    bubbleDataItem.x += 4;
  });

}



let lastTime = 0;

function gameLoop(timestamp) {
  let deltaTime = timestamp - lastTime;
  lastTime = timestamp;
  ctx.clearRect(0, 0, 800, 600);
  // bubbleData.forEach(function(bblData){ctx.clearRect(bblData.x, bblData.y, 10, 10)})

  bubbleData.forEach(function(bblData) {
    bblData.x += 1;
    bblData.y -= 1;
  })

  update(deltaTime);
  draw();

  requestAnimationFrame(gameLoop);
}
gameLoop();

<canvas id="canvas" height="400" width="400" style="border: 1px solid black;"></canvas>