canvas 如何实现拖拽小点
时间: 2023-10-07 19:11:24 浏览: 56
Canvas实现拖拽小点的基本思路是:在Canvas中绘制一个小圆点,监听鼠标事件,当鼠标按下时记录鼠标位置并标记该小圆点为选中状态,当鼠标移动时根据移动距离移动小圆点,并更新鼠标位置,当鼠标释放时取消选中状态。具体实现可以参考以下代码:
```javascript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var point = { x: 100, y: 100, r: 5, selected: false }; // 初始的小圆点
canvas.addEventListener("mousedown", function(event) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
if (Math.sqrt(Math.pow(x - point.x, 2) + Math.pow(y - point.y, 2)) < point.r) {
point.selected = true;
}
});
canvas.addEventListener("mousemove", function(event) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
if (point.selected) {
point.x += x - point.x;
point.y += y - point.y;
}
});
canvas.addEventListener("mouseup", function() {
point.selected = false;
});
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI);
ctx.fill();
requestAnimationFrame(draw);
}
draw();
```
希望这个代码能够帮到你,如果有需要再提出新的问题哦。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)