html5 随机 圆 不重叠,水平绘制多个圆HTML5
时间: 2023-11-14 19:04:59 浏览: 39
要实现随机生成多个圆并且不重叠,可以按照以下步骤进行:
1. 定义一个存储圆的数组,用来检查新生成的圆是否与已有圆重叠。
2. 定义一个函数来生成圆,函数需要传入画布上下文和画布的宽度和高度。在函数内部,生成一个随机的圆心坐标和半径。
3. 在生成圆之前,先检查新生成的圆是否与已有圆重叠。可以通过遍历数组中的圆,检查它们之间的距离是否小于两圆半径之和来实现。
4. 如果新生成的圆与已有圆重叠,则重新生成圆;否则,将新的圆添加到数组中,并在画布上绘制出来。
下面是一个简单的例子代码,可以生成随机位置和大小的圆,并且保证不重叠:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机圆不重叠</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var circles = [];
function generateCircle(width, height) {
var radius = Math.floor(Math.random() * 50) + 10;
var x = radius + Math.floor(Math.random() * (width - 2 * radius));
var y = radius + Math.floor(Math.random() * (height - 2 * radius));
for (var i = 0; i < circles.length; i++) {
var dx = circles[i].x - x;
var dy = circles[i].y - y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < circles[i].radius + radius) {
return generateCircle(width, height);
}
}
return {x: x, y: y, radius: radius};
}
for (var i = 0; i < 10; i++) {
var circle = generateCircle(canvas.width, canvas.height);
circles.push(circle);
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
}
</script>
</body>
</html>
```
这段代码会在画布上生成10个随机位置和大小的圆,保证它们不重叠。你可以将画布的宽高和圆的个数调整为自己需要的值。