html5 随机 圆 不重叠,水平绘制多个圆HTML5
时间: 2023-11-14 17:04:59 浏览: 130
要在HTML5中绘制多个随机圆并确保它们不重叠,可以采用以下步骤:
1. 首先,定义一个圆的类,包含圆心坐标(x,y)和半径(radius)属性,以及draw()方法来绘制圆。
2. 创建一个数组来存储所有的圆对象。
3. 使用一个循环来生成随机圆,每次循环生成一个圆并检查它是否与之前生成的圆重叠。如果重叠,则重新生成圆。
4. 生成一个随机的圆心坐标和半径,然后检查它是否与数组中已有的圆重叠。可以使用勾股定理来计算圆心之间的距离,如果距离小于两个圆的半径之和,则认为它们重叠了。
5. 如果圆不重叠,则将它添加到数组中,并调用它的draw()方法来绘制它。
以下是一个基本的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机圆</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 定义圆类
function Circle(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
ctx.stroke();
}
}
var circles = [];
// 生成随机圆
function generateCircles(num) {
for (var i = 0; i < num; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var r = Math.random() * 50 + 10;
var circle = new Circle(x, y, r);
// 检查圆是否重叠
var overlap = false;
for (var j = 0; j < circles.length; j++) {
var distance = Math.sqrt(Math.pow(circles[j].x - x, 2) + Math.pow(circles[j].y - y, 2));
if (distance < circles[j].r + r) {
overlap = true;
break;
}
}
// 如果圆不重叠,则添加到数组中并绘制它
if (!overlap) {
circles.push(circle);
circle.draw();
} else {
i--;
}
}
}
generateCircles(10);
</script>
</body>
</html>
```
在上面的示例中,我们生成了10个随机圆,并使用数组来存储它们。每次生成一个新圆时,我们都会检查它是否与数组中已有的圆重叠,如果重叠,则重新生成圆。最后,我们调用每个圆的draw()方法来在canvas上绘制它们。
阅读全文