当前位置：首页 > VUE

Vue实现画布

2026-01-12 22:01:29VUE

Vue 实现画布的方法

在 Vue 中实现画布功能可以通过 HTML5 的 <canvas> 元素结合 Vue 的响应式特性来完成。以下是几种常见的实现方式：

使用原生 `<canvas>` 元素

在 Vue 组件中直接使用 <canvas> 元素，并通过 ref 获取画布上下文进行操作。

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

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 100, 100);
  }
}
</script>

使用第三方库（如 Fabric.js）

Fabric.js 是一个强大的画布库，支持交互式操作和丰富的图形绘制功能。

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

<script>
import { fabric } from 'fabric';

export default {
  mounted() {
    const canvas = new fabric.Canvas(this.$refs.canvas);
    const rect = new fabric.Rect({
      left: 100,
      top: 100,
      width: 50,
      height: 50,
      fill: 'blue'
    });
    canvas.add(rect);
  }
}
</script>

动态绑定画布数据

通过 Vue 的响应式数据动态更新画布内容。

<template>
  <canvas ref="canvas" width="500" height="500"></canvas>
  <button @click="updateCanvas">更新画布</button>
</template>

<script>
export default {
  data() {
    return {
      color: 'green'
    };
  },
  mounted() {
    this.drawCanvas();
  },
  methods: {
    drawCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = this.color;
      ctx.fillRect(10, 10, 100, 100);
    },
    updateCanvas() {
      this.color = 'purple';
      this.drawCanvas();
    }
  }
}
</script>

使用 Vue 组件封装画布

将画布功能封装为可复用的 Vue 组件。

<!-- CanvasComponent.vue -->
<template>
  <canvas ref="canvas" :width="width" :height="height"></canvas>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    color: {
      type: String,
      default: 'black'
    }
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      const ctx = this.$refs.canvas.getContext('2d');
      ctx.fillStyle = this.color;
      ctx.fillRect(0, 0, this.width, this.height);
    }
  },
  watch: {
    color() {
      this.draw();
    }
  }
}
</script>

实现交互式画布

通过事件监听实现画布的交互功能，如鼠标绘图。

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

<script>
export default {
  data() {
    return {
      isDrawing: false
    };
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(e.offsetX, e.offsetY);
    },
    draw(e) {
      if (!this.isDrawing) return;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  }
}
</script>