在 Vue.js 裡面繪製 canavs

在 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 這個物件來繪圖了。