写js代码,实现鼠标画点,并通过拖拽改变点的位置
时间: 2023-06-05 21:06:57 浏览: 93
好的,这是一个关于 JavaScript 编程的问题,我可以回答。以下是实现鼠标画点并通过拖拽改变点位置的代码示例:
首先,在 HTML 中添加一个容器元素用于显示画布,以及相关的 JS 代码:
```html
<div id="canvas" style="width: 500px; height: 500px;"></div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 存储所有的点
var points = [];
// 添加点击事件监听器
canvas.addEventListener('mousedown', function(e) {
// 获取鼠标点击的位置
var x = e.offsetX;
var y = e.offsetY;
// 添加点到列表中
points.push({ x: x, y: y });
// 重新绘制画布
draw();
});
// 添加监听器以便拖拽改变点位置
canvas.addEventListener('mousemove', function(e) {
// 获取鼠标可点击位置
var x = e.offsetX;
var y = e.offsetY;
// 查找最近的点位置
var nearest = getNearestPoint(x, y);
if (nearest != null) {
// 修改该点坐标
nearest.x = x;
nearest.y = y;
// 重新绘制画布
draw();
}
});
// 获取最近的点
function getNearestPoint(x, y) {
var nearest = null;
var minDist = 10;
for (var i = 0; i < points.length; i++) {
var point = points[i];
var dist = Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2);
if (dist < minDist) {
nearest = point;
minDist = dist;
}
}
return nearest;
}
// 绘制所有的点
function draw() {
// 清空画布
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, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
}
}
</script>
```
这段代码会创建一个 500x500 像素的容器,监听鼠标点击和移动事件,以实现画点和拖拽点的功能。
当用户点击鼠标时,代码会获取鼠标点击的位置,并将该位置作为一个新的点添加到 points 数组中。然后,代码会调用 draw() 函数重新绘制画布,以显示所有点。
当用户拖拽鼠标时,代码会获取鼠标可点击位置,并查找距离最近的点。如果找到了最近的点,则会修改该点的坐标,并调用 draw() 函数重新绘制画布。
最后,draw() 函数会清空画布,然后绘制所有的点。
希望这段代码能够帮到你。如果你有更多的问题,可以继续提出来。