vue3使用canvas画矩形并可以脱动

同样可以实现，以下是 Vue 3 的示例代码：

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

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const canvasRef = ref(null);
    const rect = ref(null);
    const isDragging = ref(false);
    let offsetX = 0;
    let offsetY = 0;
    let ctx;

    const onMouseDown = (e) => {
      const rect = canvasRef.value.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      if (rect.value && isInsideRect(x, y)) {
        isDragging.value = true;
        offsetX = x - rect.value.x;
        offsetY = y - rect.value.y;
      } else {
        rect.value = { x, y, width: 0, height: 0 };
      }
    };

    const onMouseMove = (e) => {
      if (isDragging.value) {
        const rect = canvasRef.value.getBoundingClientRect();
        const x = e.clientX - rect.left - offsetX;
        const y = e.clientY - rect.top - offsetY;
        rect.value.x = x;
        rect.value.y = y;
        redraw();
      }
    };

    const onMouseUp = () => {
      if (isDragging.value) {
        isDragging.value = false;
        animateRect();
      }
    };

    const redraw = () => {
      ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
      if (rect.value) {
        ctx.fillStyle = '#f00';
        ctx.fillRect(rect.value.x, rect.value.y, rect.value.width, rect.value.height);
      }
    };

    const animateRect = () => {
      const start = performance.now();
      const end = start + 500;
      const from = { x: rect.value.x, y: rect.value.y };
      const to = { x: 100, y: 100 };

      const animate = () => {
        const now = performance.now();
        const progress = (now - start) / (end - start);
        if (progress >= 1) {
          rect.value.x = to.x;
          rect.value.y = to.y;
          redraw();
        } else {
          const x = from.x + (to.x - from.x) * progress;
          const y = from.y + (to.y - from.y) * progress;
          rect.value.x = x;
          rect.value.y = y;
          redraw();
          requestAnimationFrame(animate);
        }
      };

      animate();
    };

    const isInsideRect = (x, y) => {
      return x >= rect.value.x && x <= rect.value.x + rect.value.width && y >= rect.value.y && y <= rect.value.y + rect.value.height;
    };

    onMounted(() => {
      const canvas = canvasRef.value;
      ctx = canvas.getContext('2d');
      canvas.width = 600;
      canvas.height = 400;

      canvas.addEventListener('mousedown', onMouseDown);
      canvas.addEventListener('mousemove', onMouseMove);
      canvas.addEventListener('mouseup', onMouseUp);
      canvas.addEventListener('mouseleave', onMouseUp);
    });

    return {
      canvasRef,
    };
  },
};
</script>

在这个示例中，我们使用了 Vue 3 的 Composition API，使用了 `ref` 来创建响应式数据，并在 `setup` 函数中定义了事件处理函数。其余的代码跟 Vue 2 的示例基本相同。