当我在画布上绘制多个圆圈时,它们会聚在一起形成怪异的形状。我有25个“ x”和“ y”值来绘制存储在数组中的圆。我不确定这是否是因为两个或更多圆圈的“ x”和“ y”值相同。有什么办法可以防止这种情况和/或确保圆的x和y值与其他任何值至少相距10?谢谢。
编辑:感谢Nick Parsons,我找到了解决方案。我仍然想知道是否可以检查两个或更多个“ 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();
答案 0 :(得分: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>