怎么拖拽canvas里面的图片
时间: 2023-05-26 17:03:06 浏览: 43
你可以使用以下步骤在canvas中拖动图片:
1. 定义变量来存储鼠标在拖动期间的位置。
```
var drag = false;
var mouseX;
var mouseY;
```
2. 添加事件监听器,以便在鼠标按下时开始拖动。
```
canvas.addEventListener('mousedown', function(event) {
drag = true;
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
});
```
3. 添加另一个事件监听器,在鼠标移动时更新位置并重新绘制图像。
```
canvas.addEventListener('mousemove', function(event) {
if (drag) {
var dx = event.clientX - canvas.offsetLeft - mouseX;
var dy = event.clientY - canvas.offsetTop - mouseY;
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
// 更新图像位置
imageX += dx;
imageY += dy;
// 重新绘制图像
drawImage();
}
});
```
4. 添加最后一个事件监听器,在鼠标松开时停止拖动。
```
canvas.addEventListener('mouseup', function(event) {
drag = false;
});
```
完整的示例代码如下:
```
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
var imageX = 0;
var imageY = 0;
var drag = false;
var mouseX;
var mouseY;
// 设置图像源
image.src = 'image.jpg';
// 绘制图像
function drawImage() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, imageX, imageY);
}
// 加载图像并开始绘制
image.onload = function() {
drawImage();
};
// 添加鼠标事件监听器
canvas.addEventListener('mousedown', function(event) {
drag = true;
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
});
canvas.addEventListener('mousemove', function(event) {
if (drag) {
var dx = event.clientX - canvas.offsetLeft - mouseX;
var dy = event.clientY - canvas.offsetTop - mouseY;
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
// 更新图像位置
imageX += dx;
imageY += dy;
// 重新绘制图像
drawImage();
}
});
canvas.addEventListener('mouseup', function(event) {
drag = false;
});
```