vue实现canvas切换

Vue 实现 Canvas 切换的方法

在 Vue 中实现 Canvas 的切换可以通过动态绑定 Canvas 元素、使用条件渲染或动态组件等方式完成。以下是几种常见的方法：

动态绑定 Canvas 元素

通过 ref 和动态数据绑定实现 Canvas 的切换。创建一个变量存储当前 Canvas 的状态，通过方法切换不同的 Canvas 内容。

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

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

      if (this.currentCanvas === 1) {
        ctx.fillStyle = 'red';
        ctx.fillRect(50, 50, 100, 100);
      } else {
        ctx.fillStyle = 'blue';
        ctx.beginPath();
        ctx.arc(200, 200, 50, 0, Math.PI * 2);
        ctx.fill();
      }
    },
    switchCanvas() {
      this.currentCanvas = this.currentCanvas === 1 ? 2 : 1;
      this.drawCanvas();
    },
  },
};
</script>

使用条件渲染切换 Canvas

通过 v-if 或 v-show 切换不同的 Canvas 元素。适合需要完全替换 Canvas 内容的场景。

<template>
  <div>
    <canvas v-if="currentCanvas === 1" ref="canvas1" width="400" height="400"></canvas>
    <canvas v-else ref="canvas2" width="400" height="400"></canvas>
    <button @click="switchCanvas">切换 Canvas</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentCanvas: 1,
    };
  },
  mounted() {
    this.drawCanvas1();
    this.drawCanvas2();
  },
  methods: {
    drawCanvas1() {
      const canvas = this.$refs.canvas1;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'red';
      ctx.fillRect(50, 50, 100, 100);
    },
    drawCanvas2() {
      const canvas = this.$refs.canvas2;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'blue';
      ctx.beginPath();
      ctx.arc(200, 200, 50, 0, Math.PI * 2);
      ctx.fill();
    },
    switchCanvas() {
      this.currentCanvas = this.currentCanvas === 1 ? 2 : 1;
    },
  },
};
</script>

使用动态组件切换 Canvas

通过动态组件 (<component :is="...">) 切换不同的 Canvas 组件。适合更复杂的场景，例如多个 Canvas 组件需要独立管理。

<template>
  <div>
    <component :is="currentCanvasComponent"></component>
    <button @click="switchCanvas">切换 Canvas</button>
  </div>
</template>

<script>
import Canvas1 from './Canvas1.vue';
import Canvas2 from './Canvas2.vue';

export default {
  components: { Canvas1, Canvas2 },
  data() {
    return {
      currentCanvasComponent: 'Canvas1',
    };
  },
  methods: {
    switchCanvas() {
      this.currentCanvasComponent = this.currentCanvasComponent === 'Canvas1' ? 'Canvas2' : 'Canvas1';
    },
  },
};
</script>

使用 Canvas 绘制函数切换内容

通过一个统一的 Canvas 绘制函数，根据不同的参数绘制不同的内容。适合内容简单且切换频繁的场景。

<template>
  <div>
    <canvas ref="canvas" width="400" height="400"></canvas>
    <button @click="drawContent('rect')">绘制矩形</button>
    <button @click="drawContent('circle')">绘制圆形</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.drawContent('rect');
  },
  methods: {
    drawContent(type) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 400, 400);

      if (type === 'rect') {
        ctx.fillStyle = 'red';
        ctx.fillRect(50, 50, 100, 100);
      } else {
        ctx.fillStyle = 'blue';
        ctx.beginPath();
        ctx.arc(200, 200, 50, 0, Math.PI * 2);
        ctx.fill();
      }
    },
  },
};
</script>

以上方法可以根据实际需求选择使用。动态绑定适合简单的内容切换，条件渲染适合完全替换 Canvas，动态组件适合复杂的多 Canvas 管理，而统一绘制函数适合频繁切换内容的场景。