Vue Canvas 缩放联动：底层 Canvas 缩放时上层 Canvas 跟着缩放并绘制图像

要实现底层 canvas 缩放时上层 canvas 跟着缩放，并在底层 canvas 上绘制缩放后的图像，可以使用 Vue 的'watch'属性来监听底层 canvas 的缩放比例变化，并在变化时更新上层 canvas 的缩放比例和绘制图像。

首先，在 Vue 组件的'data'属性中定义底层 canvas 的缩放比例和上层 canvas 的缩放比例：

data() {
  return {
    bottomCanvasScale: 1,
    topCanvasScale: 1,
  }
}

然后，在底层 canvas 的'watch'属性中监听缩放比例的变化，并在变化时更新上层 canvas 的缩放比例和绘制图像：

watch: {
  bottomCanvasScale(newScale) {
    this.topCanvasScale = newScale;
    this.drawTopCanvas();
  },
},

接下来，在 Vue 组件的'methods'属性中定义绘制底层 canvas 和上层 canvas 的方法：

methods: {
  drawBottomCanvas() {
    // 获取底层 canvas 的上下文
    const bottomCtx = this.$refs.bottomCanvas.getContext('2d');
    
    // 清空底层 canvas
    bottomCtx.clearRect(0, 0, this.bottomCanvasWidth, this.bottomCanvasHeight);
    
    // 绘制缩放后的图像
    bottomCtx.drawImage(this.image, 0, 0, this.bottomCanvasWidth * this.bottomCanvasScale, this.bottomCanvasHeight * this.bottomCanvasScale);
  },
  
  drawTopCanvas() {
    // 获取上层 canvas 的上下文
    const topCtx = this.$refs.topCanvas.getContext('2d');
    
    // 清空上层 canvas
    topCtx.clearRect(0, 0, this.topCanvasWidth, this.topCanvasHeight);
    
    // 绘制缩放后的图像
    topCtx.drawImage(this.image, 0, 0, this.topCanvasWidth * this.topCanvasScale, this.topCanvasHeight * this.topCanvasScale);
  },
},

最后，在 Vue 组件的'mounted'生命周期钩子中初始化底层 canvas 和上层 canvas，并调用绘制底层 canvas 的方法：

mounted() {
  // 获取底层 canvas 和上层 canvas 的宽高
  this.bottomCanvasWidth = this.$refs.bottomCanvas.width;
  this.bottomCanvasHeight = this.$refs.bottomCanvas.height;
  this.topCanvasWidth = this.$refs.topCanvas.width;
  this.topCanvasHeight = this.$refs.topCanvas.height;
  
  // 加载图像
  this.image = new Image();
  this.image.src = 'path/to/image.jpg';
  this.image.onload = () => {
    // 绘制底层 canvas
    this.drawBottomCanvas();
  };
},

以上就是实现在 Vue 中绘制两个 canvas、底层 canvas 缩放时上层 canvas 跟着缩放，并在底层 canvas 上绘制缩放后的图像的方法。记得在 Vue 组件的模板中添加底层 canvas 和上层 canvas 的标签：

<template>
  <div>
    <canvas ref="bottomCanvas" width="800" height="600"></canvas>
    <canvas ref="topCanvas" width="800" height="600"></canvas>
  </div>
</template>