当前位置：首页 > VUE

Vue如何实现canvas

2026-03-29 22:51:12VUE

Vue 中实现 Canvas 的方法

在 Vue 中可以通过直接操作 DOM 或使用第三方库来实现 Canvas 功能。以下是几种常见的方法：

使用 ref 获取 Canvas 元素

在 Vue 的模板中直接添加 <canvas> 标签，并通过 ref 获取 DOM 元素进行操作。

<template>
  <canvas ref="canvas" width="400" height="400"></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>

使用 Vue 的生命周期钩子

在 mounted 钩子中确保 DOM 已渲染完成后再操作 Canvas。

<template>
  <canvas id="myCanvas" width="400" height="400"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 200, 200);
  }
}
</script>

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

对于更复杂的 Canvas 操作，可以使用第三方库如 fabric.js。

<template>
  <canvas ref="canvas" width="400" height="400"></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: 'green'
    });
    canvas.add(rect);
  }
}
</script>

动态更新 Canvas 内容

结合 Vue 的响应式数据动态更新 Canvas 内容。

<template>
  <canvas ref="canvas" width="400" height="400"></canvas>
  <button @click="updateCanvas">更新 Canvas</button>
</template>

<script>
export default {
  data() {
    return {
      color: 'purple'
    };
  },
  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(20, 20, 150, 150);
    },
    updateCanvas() {
      this.color = 'orange';
      this.drawCanvas();
    }
  }
}
</script>

封装 Canvas 为组件

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

Vue如何实现canvas

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

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