当前位置：首页 > VUE

vue实现canvas动态轨迹

2026-01-22 05:35:51VUE

实现动态轨迹的基本思路

在Vue中实现Canvas动态轨迹，核心是利用Canvas的绘图API结合Vue的数据响应式特性。通过监听数据变化或使用动画帧（requestAnimationFrame）动态更新Canvas绘制路径。

初始化Canvas环境

在Vue组件的<template>中声明Canvas元素并设置宽高：

<canvas ref="canvas" width="800" height="500"></canvas>

在mounted生命周期中获取Canvas上下文：

mounted() {
  const canvas = this.$refs.canvas;
  this.ctx = canvas.getContext('2d');
  this.initPath();
}

定义路径数据与绘制方法

使用Vue的data维护路径点数组，并提供绘制方法：

data() {
  return {
    points: [],
    isDrawing: false
  }
},
methods: {
  initPath() {
    this.ctx.strokeStyle = '#42b983';
    this.ctx.lineWidth = 3;
  },
  drawPath() {
    this.ctx.beginPath();
    this.points.forEach((point, i) => {
      i === 0 ? this.ctx.moveTo(...point) : this.ctx.lineTo(...point);
    });
    this.ctx.stroke();
  }
}

实现动态更新逻辑

通过事件监听或定时器添加新坐标点并重绘：

startDynamicPath() {
  this.interval = setInterval(() => {
    const x = Math.random() * 800;
    const y = Math.random() * 500;
    this.points.push([x, y]);
    this.ctx.clearRect(0, 0, 800, 500);
    this.drawPath();
  }, 200);
},
stopDynamicPath() {
  clearInterval(this.interval);
}

平滑动画优化方案

使用requestAnimationFrame替代setInterval实现更流畅的动画：

animate() {
  if (!this.isDrawing) return;

  const x = lastX + (Math.random() * 6 - 3);
  const y = lastY + (Math.random() * 6 - 3);
  this.points.push([x, y]);
  this.ctx.clearRect(0, 0, 800, 500);
  this.drawPath();

  requestAnimationFrame(this.animate);
}

响应式路径重置

添加重置功能并利用Vue的响应式特性自动更新视图：

resetPath() {
  this.points = [];
  this.ctx.clearRect(0, 0, 800, 500);
}

完整组件示例

<template>
  <div>
    <canvas ref="canvas" width="800" height="500"></canvas>
    <button @click="startDynamicPath">开始</button>
    <button @click="stopDynamicPath">停止</button>
    <button @click="resetPath">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      points: [],
      isDrawing: false,
      interval: null
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
    this.initPath();
  },
  methods: {
    initPath() {
      this.ctx.strokeStyle = '#42b983';
      this.ctx.lineWidth = 3;
    },
    drawPath() {
      this.ctx.beginPath();
      this.points.forEach((point, i) => {
        i === 0 ? this.ctx.moveTo(...point) : this.ctx.lineTo(...point);
      });
      this.ctx.stroke();
    },
    startDynamicPath() {
      this.isDrawing = true;
      this.animate();
    },
    stopDynamicPath() {
      this.isDrawing = false;
    },
    animate() {
      if (!this.isDrawing) return;

      const lastPoint = this.points[this.points.length - 1] || [400, 250];
      const x = lastPoint[0] + (Math.random() * 6 - 3);
      const y = lastPoint[1] + (Math.random() * 6 - 3);
      this.points.push([x, y]);
      this.ctx.clearRect(0, 0, 800, 500);
      this.drawPath();

      requestAnimationFrame(this.animate);
    },
    resetPath() {
      this.points = [];
      this.ctx.clearRect(0, 0, 800, 500);
    }
  }
}
</script>

vue实现canvas动态轨迹