用html实现画布上随机分布的二十个点,用户在用鼠标点击某两点后,这两点之间自动连红色线的代码
时间: 2024-05-12 14:17:43 浏览: 7
以下是用HTML和JavaScript实现该功能的代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Connect Dots</title>
<style>
canvas {
border: 1px solid black;
cursor: crosshair;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Draw 20 random points on the canvas
var points = [];
for (var i = 0; i < 20; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
points.push([x, y]);
ctx.beginPath();
ctx.arc(x, y, 3, 0, 2 * Math.PI);
ctx.fill();
}
// Connect the dots when the user clicks on two of them
var selectedPoints = [];
canvas.addEventListener("click", function(event) {
if (selectedPoints.length < 2) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
for (var i = 0; i < points.length; i++) {
var dx = x - points[i][0];
var dy = y - points[i][1];
if (dx * dx + dy * dy < 9) {
selectedPoints.push(points[i]);
ctx.beginPath();
ctx.arc(points[i][0], points[i][1], 5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
break;
}
}
if (selectedPoints.length == 2) {
ctx.beginPath();
ctx.moveTo(selectedPoints[0][0], selectedPoints[0][1]);
ctx.lineTo(selectedPoints[1][0], selectedPoints[1][1]);
ctx.strokeStyle = "red";
ctx.stroke();
}
}
});
</script>
</body>
</html>
```
这段代码首先在画布上随机分布了20个点,然后监听canvas的click事件,当用户点击两个点后,会把这两个点用一条红色线连接起来。