在 js 裡要繪製 canvas 的話，我們可以這樣建立物件後開始繪製：
<canvas id="canvas"></canvas>var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
現在換成是 vue.js 的話，先用 ref 取代 id：
<canvas ref="canvas"></canvas>然後在 data 裡準備一個 vueCanvas，並把值設定為 null
data() {
return {
vueCanvas: null
}
}
接著寫在 mounted 的時候建立 canvas 物件。
mounted(){
var ctx = this.$refs.canvas.getContext("2d");
this.vueCanvas=ctx;
this.vueCanvas.beginPath();
this.vueCanvas.rect(20, 20, 200, 100);
this.vueCanvas.stroke();
},
這樣就可以使用 vueCanvas 這個物件來繪圖了。
![[Vue.js] 單選切換 class](/assets/upload/1583563899683_0.jpg)
![[Three.js] 在空間裡畫線](/assets/upload/1588391477297_0.png)
