vue canvas，通过接口获取多辆小车位置信息，包括角度、二维坐标、小车编号等，实时显示小车位置，并根据对比下一时刻接口获取的数据来计算小车移动速度，首次绘制绘制所有小车，第二次及之后仅绘制有坐标变化的小车，坐标没有变化的小车保持不动

实现这个功能的步骤如下：

1. 在 Vue 中创建一个 canvas 元素，用于绘制小车的位置。
2. 创建一个 Vue 组件，并在组件中定义一个 data 属性，用于存储小车的位置信息。初始值为空数组。
3. 在组件的 mounted 生命周期钩子函数中，调用接口获取小车的位置信息，并将数据存储在 data 属性中。
4. 将 canvas 元素的绘制上下文存储在组件的 data 属性中。
5. 在组件的 updated 生命周期钩子函数中，根据对比上一时刻和当前时刻接口获取的数据，计算小车的移动速度，并更新小车的位置信息。
6. 如果小车的位置信息发生变化，则在 canvas 上绘制小车的新位置。如果小车的位置信息没有变化，则不进行绘制。

下面是一个代码示例：

<template>
  <canvas ref="canvas" width="800" height="600"></canvas>
</template>

<script>
export default {
  data() {
    return {
      cars: [], // 存储小车位置信息的数组
      ctx: null, // 存储画布上下文的变量
      lastPositions: {} // 存储上一时刻小车位置信息的对象
    };
  },
  mounted() {
    // 获取画布上下文
    this.ctx = this.$refs.canvas.getContext('2d');

    // 调用接口获取小车位置信息，并存储在 cars 数组中
    this.getCarsPosition();
  },
  updated() {
    // 根据对比上一时刻和当前时刻接口获取的数据，更新小车位置信息
    const newPositions = this.getCarsPosition();
    this.updateCarsPosition(newPositions);
  },
  methods: {
    getCarsPosition() {
      // 调用接口获取小车位置信息，并返回数据
      const data = [
        { id: 1, x: 100, y: 100, angle: 30 },
        { id: 2, x: 200, y: 200, angle: 45 },
        { id: 3, x: 300, y: 300, angle: 60 }
      ];
      return data;
    },
    updateCarsPosition(newPositions) {
      // 对比上一时刻和当前时刻小车位置信息，计算小车的移动速度，并更新位置信息
      this.cars.forEach(car => {
        const newPosition = newPositions.find(p => p.id === car.id);
        if (newPosition) {
          // 计算小车的移动速度
          const dx = newPosition.x - car.x;
          const dy = newPosition.y - car.y;
          const distance = Math.sqrt(dx * dx + dy * dy);
          const speed = distance / 10;

          // 更新小车位置信息
          car.x = newPosition.x;
          car.y = newPosition.y;
          car.angle = newPosition.angle;

          // 绘制小车的新位置
          this.drawCar(car);
        }
      });

      // 存储当前时刻小车位置信息
      this.lastPositions = {};
      newPositions.forEach(p => {
        this.lastPositions[p.id] = { x: p.x, y: p.y };
      });
    },
    drawCar(car) {
      // 绘制小车的新位置
      this.ctx.save();
      this.ctx.translate(car.x, car.y);
      this.ctx.rotate((car.angle * Math.PI) / 180);
      this.ctx.fillStyle = 'red';
      this.ctx.fillRect(-20, -10, 40, 20);
      this.ctx.restore();
    }
  }
};
</script>

在上面的代码中，我们定义了一个 Vue 组件，包含一个 canvas 元素和一些方法。在组件的 mounted 生命周期钩子函数中，我们获取了 canvas 的上下文，并调用接口获取小车位置信息。在组件的 updated 生命周期钩子函数中，我们对比了上一时刻和当前时刻接口获取的数据，并更新了小车的位置信息。如果小车的位置信息发生变化，则在 canvas 上绘制小车的新位置。

注意，为了避免绘制重复的小车，我们在更新小车位置信息时，只绘制坐标发生变化的小车。此外，为了在下一时刻对比小车位置信息，我们还需要存储上一时刻小车位置信息的对象。