Vue3+TypeScript Canvas 实现小车运动轨迹动画

当然，我可以为您提供一个使用 Vue3 + TypeScript 和 Canvas 编写一个小车运动轨迹的示例。

首先，您需要在您的 Vue 项目中安装 canvas 库。使用以下命令：

npm install canvas --save

接下来，您可以在 Vue 组件中创建一个 Canvas 元素，并使用 Vue3 的生命周期钩子来初始化和绘制小车的运动轨迹。以下是一个示例组件的代码：

<template>
  <canvas ref='canvas' width='500' height='500'></canvas>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  mounted() {
    this.drawCarPath();
  },
  methods: {
    drawCarPath() {
      const canvas = this.$refs.canvas as HTMLCanvasElement;
      const ctx = canvas.getContext('2d');

      // 绘制小车运动轨迹
      ctx.beginPath();
      ctx.moveTo(100, 100);
      ctx.lineTo(400, 100);
      ctx.lineTo(400, 400);
      ctx.lineTo(100, 400);
      ctx.closePath();

      // 绘制小车
      ctx.fillStyle = 'red';
      ctx.fillRect(100, 100, 20, 20);

      // 绘制小车初始位置
      ctx.fillStyle = 'blue';
      ctx.fillRect(100, 100, 10, 10);

      // 绘制小车运动路径
      ctx.strokeStyle = 'green';
      ctx.lineWidth = 2;
      ctx.stroke();

      // 小车按轨迹运动
      let x = 100;
      let y = 100;
      const interval = setInterval(() => {
        if (x < 400) {
          x += 1;
        } else if (y < 400) {
          y += 1;
        } else {
          clearInterval(interval);
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(x, y, 10, 10);
      }, 10);
    },
  },
});
</script>

在上面的代码中，我们使用mounted生命周期钩子来调用drawCarPath方法，该方法会在组件挂载后绘制小车运动轨迹。

在drawCarPath方法中，我们首先获取 Canvas 元素的上下文ctx，然后使用ctx对象绘制小车的运动轨迹。接下来，我们绘制了一个红色的小车，并在其初始位置绘制了一个蓝色的小方块。

最后，我们使用setInterval函数按照预定的路径让小车移动，并在每次移动后通过ctx.clearRect方法清除画布上的内容，然后绘制新的小方块表示小车的当前位置。

请注意，这只是一个简单的示例，您可以根据自己的需求进行定制和扩展。希望对您有所帮助！