当前位置：首页 > VUE

Vue如何实现canvas

2026-03-09 11:06:44VUE

Vue 中实现 Canvas 的方法

在 Vue 中使用 Canvas 可以通过多种方式实现，以下是几种常见的方法：

使用原生 Canvas API

在 Vue 组件的 mounted 生命周期钩子中，通过 ref 获取 Canvas 元素并调用原生 Canvas API 进行绘制。

<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 的响应式数据驱动 Canvas

结合 Vue 的响应式数据，动态更新 Canvas 内容。通过监听数据变化，重新绘制 Canvas。

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

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

使用第三方库

如果需要更复杂的 Canvas 操作，可以集成第三方库如 fabric.js 或 konva.js。这些库提供了更高级的 API 和功能。

<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,
      fill: 'red',
      width: 100,
      height: 100
    });
    canvas.add(rect);
  }
}
</script>

使用 Vue 组件封装 Canvas

将 Canvas 封装为可复用的 Vue 组件，通过 props 传递配置参数。

Vue如何实现canvas

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

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