vue3中实现canvas 图片 拖动，并写出详细的代码

要实现canvas图片拖动，可以通过以下步骤完成：

1. 在Vue3中使用canvas元素，并在mounted钩子函数中获取canvas上下文对象。

2. 加载图片，并在图片加载完成后绘制到canvas上。

3. 监听mousedown、mousemove和mouseup事件，并在事件回调函数中实现图片的拖动效果。

下面是详细的代码实现：

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    this.img = new Image();
    this.img.src = 'your_image_url';
    this.img.onload = () => {
      this.canvas.width = this.img.width;
      this.canvas.height = this.img.height;
      this.ctx.drawImage(this.img, 0, 0);
    };
    this.canvas.addEventListener('mousedown', this.onMouseDown);
    this.canvas.addEventListener('mousemove', this.onMouseMove);
    this.canvas.addEventListener('mouseup', this.onMouseUp);
  },
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      translateX: 0,
      translateY: 0
    };
  },
  methods: {
    onMouseDown(event) {
      this.isDragging = true;
      this.startX = event.clientX - this.translateX;
      this.startY = event.clientY - this.translateY;
    },
    onMouseMove(event) {
      if (this.isDragging) {
        this.translateX = event.clientX - this.startX;
        this.translateY = event.clientY - this.startY;
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.translate(this.translateX, this.translateY);
        this.ctx.drawImage(this.img, 0, 0);
        this.ctx.translate(-this.translateX, -this.translateY);
      }
    },
    onMouseUp() {
      this.isDragging = false;
    }
  }
}
</script>

在这个例子中，我们使用canvas元素来显示一张图片，然后监听mousedown、mousemove和mouseup事件来实现图片的拖动效果。具体来说，当用户按下鼠标左键时，我们设置isDragging为true，并记录下鼠标当前的位置，当用户移动鼠标时，我们计算出鼠标从按下开始到移动时的偏移量，并将画布的坐标系移动相应的距离，然后重新绘制图片。最后，当用户松开鼠标左键时，我们将isDragging设为false，停止拖动。