用html实现画布上随机分布的二十个点,用户在用鼠标点击这二十个点中的任意两点后,这两点之间自动连红色线,可多次连接这些点的代码
时间: 2024-05-15 16:17:19 浏览: 44
很高兴能为您解答问题。以下是用HTML和JavaScript实现画布上随机分布的二十个点,并且用户在用鼠标点击这二十个点中的任意两点后,这两点之间自动连红色线(可多次连接这些点)的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机分布二十个点并连接</title>
<style type="text/css">
canvas {
border: 1px solid #d3d3d3;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 生成20个随机坐标点
var points = [];
for (var i = 0; i < 20; i++) {
var x = Math.floor(Math.random() * 500) + 50;
var y = Math.floor(Math.random() * 300) + 50;
points.push({x: x, y: y});
}
// 画出随机坐标点
for (var i = 0; i < 20; i++) {
context.beginPath();
context.arc(points[i].x, points[i].y, 5, 0, 2 * Math.PI);
context.fillStyle = "black";
context.fill();
}
// 连接任意两个点
var selectedPoints = [];
canvas.addEventListener("mousedown", function(event) {
var mouseX = event.pageX - canvas.offsetLeft;
var mouseY = event.pageY - canvas.offsetTop;
for (var i = 0; i < 20; i++) {
if (Math.pow(mouseX - points[i].x, 2) + Math.pow(mouseY - points[i].y, 2) <= Math.pow(5, 2)) {
selectedPoints.push(points[i]);
if (selectedPoints.length == 2) {
context.beginPath();
context.moveTo(selectedPoints[0].x, selectedPoints[0].y);
context.lineTo(selectedPoints[1].x, selectedPoints[1].y);
context.strokeStyle = "red";
context.stroke();
selectedPoints = [];
}
break;
}
}
});
</script>
</body>
</html>
```
解析(仅供参考):
首先生成了 20 个随机坐标点,然后在画布上画出这些点。接下来监听鼠标点击事件,如果点击在某个坐标点的范围内,则将该点加入已选点的集合中。当已选点的集合中有两个点时,就用红色线段连接这两个点,并且清空已选点的集合。这样就能实现画布上随机分布的二十个点,用户在用鼠标点击这二十个点中的任意两点后,这两点之间自动连红色线,可多次连接这些点的功能。