当前位置：首页 > VUE

vue实现canvas切换

2026-01-15 01:56:54VUE

Vue 实现 Canvas 切换的方法

在 Vue 中实现 Canvas 切换通常涉及动态渲染不同的 Canvas 内容或切换多个 Canvas 元素。以下是几种常见方法：

动态绑定 Canvas 内容

通过 Vue 的数据绑定和计算属性动态更新 Canvas 内容：

<template>
  <canvas ref="canvas" :width="width" :height="height"></canvas>
  <button @click="switchCanvas">切换内容</button>
</template>

<script>
export default {
  data() {
    return {
      width: 400,
      height: 300,
      currentContent: 'content1'
    };
  },
  methods: {
    drawCanvas(content) {
      const ctx = this.$refs.canvas.getContext('2d');
      ctx.clearRect(0, 0, this.width, this.height);

      if (content === 'content1') {
        ctx.fillStyle = 'red';
        ctx.fillRect(50, 50, 100, 100);
      } else {
        ctx.fillStyle = 'blue';
        ctx.beginPath();
        ctx.arc(150, 150, 50, 0, Math.PI * 2);
        ctx.fill();
      }
    },
    switchCanvas() {
      this.currentContent = this.currentContent === 'content1' ? 'content2' : 'content1';
      this.drawCanvas(this.currentContent);
    }
  },
  mounted() {
    this.drawCanvas(this.currentContent);
  }
};
</script>

使用 v-if 切换多个 Canvas

通过 v-if 或 v-show 切换不同的 Canvas 元素：

<template>
  <canvas v-if="showCanvas1" ref="canvas1" width="400" height="300"></canvas>
  <canvas v-else ref="canvas2" width="400" height="300"></canvas>
  <button @click="showCanvas1 = !showCanvas1">切换 Canvas</button>
</template>

<script>
export default {
  data() {
    return {
      showCanvas1: true
    };
  },
  mounted() {
    this.initCanvas1();
    this.initCanvas2();
  },
  methods: {
    initCanvas1() {
      const ctx = this.$refs.canvas1.getContext('2d');
      ctx.fillStyle = 'green';
      ctx.fillRect(50, 50, 200, 100);
    },
    initCanvas2() {
      const ctx = this.$refs.canvas2.getContext('2d');
      ctx.fillStyle = 'purple';
      ctx.beginPath();
      ctx.arc(200, 150, 50, 0, Math.PI * 2);
      ctx.fill();
    }
  }
};
</script>

使用组件化拆分 Canvas

将 Canvas 封装为子组件，通过父组件控制切换：

vue实现canvas切换

<!-- ParentComponent.vue -->
<template>
  <button @click="currentComponent = 'CanvasA'">显示 Canvas A</button>
  <button @click="currentComponent = 'CanvasB'">显示 Canvas B</button>
  <component :is="currentComponent"></component>
</template>

<script>
import CanvasA from './CanvasA.vue';
import CanvasB from './CanvasB.vue';

export default {
  components: { CanvasA, CanvasB },
  data() {
    return {
      currentComponent: 'CanvasA'
    };
  }
};
</script>

<!-- CanvasA.vue -->
<template>
  <canvas ref="canvas" width="400" height="300"></canvas>
</template>

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