javascript - 当我在 JavaScript Canvas 上绘制形状时，为什么它们会相连？

Question

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

编辑:感谢尼克·帕森斯，我找到了解决方案。我仍然想知道是否可以检查两个或多个“x”或“y”值是否彼此接近，例如:如果两个不同的“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>