vue canvas画布放大缩小

Vue是一个流行的JavaScript框架，而Canvas是HTML5中提供的用于绘制图形的标准API。在Vue中使用Canvas需要引入相关的Canvas库。

要实现Canvas画布的放大缩小，需要用到Canvas中提供的缩放方法：scale()。在Vue中，可以通过绑定数据来控制画布的缩放比例。具体实现步骤如下：

1. 在Vue的模板中，添加一个Canvas元素，并设置宽度和高度。

<canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>

2. 在Vue的data属性中，定义一个scale变量，并设置初始值为1。

data() {
  return {
    scale: 1,
    canvasWidth: 800,
    canvasHeight: 600
  }
}

3. 在Vue的methods中，定义一个缩放方法，该方法将会改变scale变量的值，并调用Canvas中的scale()方法。

methods: {
  zoomIn() {
    this.scale += 0.1;
    this.drawCanvas();
  },
  zoomOut() {
    this.scale -= 0.1;
    this.drawCanvas();
  },
  drawCanvas() {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    ctx.save();
    ctx.scale(this.scale, this.scale);
    // 绘制图形
    ctx.restore();
  }
}

4. 在Vue的模板中，添加两个按钮，并分别绑定zoomIn和zoomOut方法。

<button @click="zoomIn">放大</button>
<button @click="zoomOut">缩小</button>

至此，我们就完成了Canvas画布的放大缩小。在缩放时需要注意绘制图形的坐标也要相应地进行缩放。