canvas内绘制的图片怎么可以拖动位置
时间: 2023-08-10 21:19:49 浏览: 50
要在 Canvas 中实现图片的拖动,你需要监听鼠标事件,在鼠标移动时重新绘制图片。具体来说,你可以在 `mousedown` 事件中记录当前鼠标位置和图片位置的差值,然后在 `mousemove` 事件中更新图片位置,并重新绘制图片。
以下是一个示例代码:
```javascript
// 创建一个 Image 对象
var img = new Image();
img.src = "path/to/image.jpg";
// 记录图片位置和鼠标位置之间的差值
var offsetX, offsetY;
// 图片加载完成后,在 Canvas 上绘制图片
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
// 鼠标按下时记录鼠标位置和图片位置之间的差值
canvas.addEventListener("mousedown", function(e) {
var rect = canvas.getBoundingClientRect();
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
});
// 鼠标移动时更新图片位置,并重新绘制图片
canvas.addEventListener("mousemove", function(e) {
if (e.buttons !== 1) {
return;
}
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left - offsetX;
var y = e.clientY - rect.top - offsetY;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, x, y);
});
```
在上面的代码中,我们首先创建了一个 Image 对象,并在该对象的 `onload` 事件中绘制了图片。接着,我们在 Canvas 上监听了 `mousedown` 和 `mousemove` 事件,记录了鼠标位置和图片位置之间的差值,并在鼠标移动时重新绘制了图片。
希望这能帮到你!