Vue中的canvas元素廣泛應用于繪制各種圖形和動畫效果。其中，縮放是canvas繪圖中經常用到的一個功能，可以將圖形按比例縮放，達到不同的視覺效果。

下面是一個簡單的Vue組件，它展示了如何使用canvas實現縮放功能：

<template>
<canvas ref="canvasRef"></canvas>
</template>
<script>
export default {
name: "ZoomCanvas",
data() {
return {
zoom: 1 // 定義初始縮放比例
};
},
mounted() {
this.canvas = this.$refs.canvasRef;
this.ctx = this.canvas.getContext("2d");
this.draw(); // 繪制初始圖形
},
methods: {
draw() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// 繪制一個矩形
this.ctx.fillStyle = "#FFC0CB";
this.ctx.fillRect(0, 0, 100, 100);
},
handleZoomIn() {
// 放大
this.zoom += 0.1;
this.draw();
},
handleZoomOut() {
// 縮小
this.zoom -= 0.1;
this.draw();
}
},
watch: {
zoom(newVal, oldVal) {
// 監聽zoom變化，重新繪制圖形
this.ctx.setTransform(newVal, 0, 0, newVal, 0, 0);
this.draw();
}
}
};
</script>

在這個組件中，我們定義了一個叫做zoom的data屬性，用于保存當前的縮放比例。在mounted鉤子函數中，我們獲取了canvas的引用，并通過getContext方法獲取了繪圖上下文。然后，我們定義了一個draw方法，用于繪制矩形圖形。

接著，我們定義了兩個方法，handleZoomIn和handleZoomOut，用于放大和縮小圖形。在這兩個方法中，我們改變zoom屬性的值，并調用draw方法重新繪制圖形。

最后，在watch中，我們監聽zoom屬性的變化，通過setTransform方法實現畫布的縮放，然后重新繪制圖形。