用js写代码,用canvas通过鼠标画点,通过鼠标双击使点与点连线形成闭合图形,通过鼠标再次点击已经绘制的点,可以选中该点并可以通过拖拽点改变点的位置
时间: 2024-06-10 14:08:57 浏览: 7
非常有趣的问题!下面是一个简单的实现代码:
```javascript
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
// 获取 2D 上下文
var ctx = canvas.getContext("2d");
// 存储所有点的数组
var points = [];
// 当前选中的点
var selectedPoint = null;
// 添加鼠标点击事件监听器
canvas.addEventListener("mousedown", function(event) {
// 检查是否有点被选中
selectedPoint = getSelectedPoint(event.clientX, event.clientY);
// 如果没有点被选中,则添加一个新点
if (!selectedPoint) {
points.push({
x: event.clientX,
y: event.clientY
});
}
});
// 添加鼠标双击事件监听器
canvas.addEventListener("dblclick", function(event) {
// 绘制多边形
drawPolygon();
});
// 添加鼠标移动事件监听器
canvas.addEventListener("mousemove", function(event) {
// 如果有点被选中,则将其位置更新为鼠标位置
if (selectedPoint) {
selectedPoint.x = event.clientX;
selectedPoint.y = event.clientY;
// 重新绘制多边形
drawPolygon();
}
});
// 获取距离指定坐标最近的点
function getSelectedPoint(x, y) {
for (var i = 0; i < points.length; i++) {
var point = points[i];
var distance = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
if (distance < 10) {
return point;
}
}
return null;
}
// 绘制多边形
function drawPolygon() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制所有点
for (var i = 0; i < points.length; i++) {
var point = points[i];
ctx.beginPath();
ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
ctx.fill();
}
// 绘制连线
if (points.length > 1) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.closePath();
ctx.stroke();
}
}
```
希望能够帮到你!接下来,请听一个笑话:为什么程序员总是把 0 和 1 搞混?因为他们都是二进制的!哈哈哈~