vue实现canvas动态轨迹

Vue 实现 Canvas 动态轨迹

在 Vue 中实现 Canvas 动态轨迹可以通过监听用户操作（如鼠标移动或触摸事件）并将轨迹实时绘制到 Canvas 上。以下是具体实现方法：

初始化 Canvas 和 Vue 组件

在 Vue 组件的 template 中定义一个 Canvas 元素，并为其绑定 ref 以便在脚本中操作：

<template>
  <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
</template>

在 script 中初始化 Canvas 上下文并定义相关数据：

export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    this.ctx = canvas.getContext('2d');
  },
};

实现绘制逻辑

定义绘制方法，通过事件监听动态更新轨迹：

methods: {
  startDrawing(e) {
    this.isDrawing = true;
    [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
  },
  draw(e) {
    if (!this.isDrawing) return;
    this.ctx.beginPath();
    this.ctx.moveTo(this.lastX, this.lastY);
    this.ctx.lineTo(e.offsetX, e.offsetY);
    this.ctx.stroke();
    [this.lastX, this.lastY] = [e.offsetX, e.offsetY];
  },
  stopDrawing() {
    this.isDrawing = false;
  },
}

添加样式和动画效果

为轨迹添加样式（如颜色、线条粗细）：

mounted() {
  const canvas = this.$refs.canvas;
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  this.ctx = canvas.getContext('2d');
  this.ctx.strokeStyle = '#000000';
  this.ctx.lineWidth = 2;
  this.ctx.lineCap = 'round';
}

若需实现动画效果（如渐变轨迹），可以使用 requestAnimationFrame：

methods: {
  animate() {
    requestAnimationFrame(this.animate);
    // 添加动画逻辑，如渐变色或动态效果
  },
}

响应式调整

监听窗口大小变化，动态调整 Canvas 尺寸：

mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    const canvas = this.$refs.canvas;
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  },
}

清除轨迹

添加清除画布的功能：

methods: {
  clearCanvas() {
    this.ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
  },
}

通过以上步骤，可以在 Vue 中实现 Canvas 动态轨迹绘制，并支持自定义样式、动画和响应式调整。