<使用Vue中Canvas清空>在使用Vue進行Canvas繪制時，需要在每次繪制完成后調用canvas的`clearRect`方法清空畫布，這樣才能保證下一次的繪制是基于新的畫布上進行的。 在Vue的實例中，我們可以通過監聽數據變化或者DOM結構變化來觸發重新繪制Canvas。在這個過程中，如果沒有清空畫布，會導致繪制出來的結果出現異常。 以下是一種在Vue中清空Canvas畫布的實現方式。

1. 給Canvas添加ID

<canvas id="myCanva"></canvas>

2. 使用Vue的watch屬性來監聽數據變化

data() {
return {
data1: 20,
data2: 30
};
},
watch: {
data1: function () {
this.drawOnCanvas();
},
data2: function () {
this.drawOnCanvas();
}
},

3. 在watch的回調函數里面，利用canvas的getContext方法拿到context對象

drawOnCanvas() {
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext('2d');
}

4. 在回調函數里面，使用`clearRect`方法清空畫布

drawOnCanvas() {
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}

5. 在回調函數里面，進行新的繪制

drawOnCanvas() {
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "red";
context.fillRect(0, 0, this.data1, this.data2);
}

6. 在Vue的模板中設置按鈕用來觸發數據變化

<button @click="data1++">增加data1的值</button>
<button @click="data2++">增加data2的值</button>

通過以上六個步驟，可以實現在Vue中清空Canvas畫布。 注意：在Vue的watch屬性中監聽的數據變化盡量少，這樣可以避免頻繁的重新繪制Canvas，提高性能。