VueJS + Canvas-Context如何鏈接在一起？

Question

我使用VueJS，我想將HTML-Canvas與Canvas-Context合併。我想打電話從context內我components像：

mounted() { 
    this.$c.moveTo(100, 100) 
    this.$c.lineTo(200, 200) 
} 

我在main.js開始：

Vue.prototype.$c = document.querySelector('canvas').getContext('2d') 

而且，我也不知道如何與關鍵字this工作在構建這樣的：

const Something = (x, y) => { 
    this.x = x 
    this.y = y 
    this.draw() { 
    this.$c.moveTo(100, 100) 
    this.$c.lineTo(200, 200) 
    } 
} 

所以，我怎麼能結合canvas-context和VueJS？

Answer 1

在創建Vue實例（如Adding Instance Properties中所述）之前，可以像您一樣設置原型屬性。

如this answer中所述，箭頭函數不會綁定到this，因此請確保使用非箭頭函數。

請勿在實例屬性或回調（例如vm.$watch('a', newVal => this.myMethod())）上使用arrow functions。由於箭頭函數綁定到父上下文，因此this將不是您所期望的Vue實例，而this.myMethod將是undefined。 ¹

參見下面的代碼段的一個例子。點擊繪製按鈕在畫布上繪製一條線。

//wait for DOM to load 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    //set property on all Vue instances 
 
    Vue.prototype.$c = document.getElementById('myCanvas').getContext('2d'); 
 
    //create Vue instance 
 
    var vm = new Vue({ 
 
    el: '#example', 
 
    methods: { 
 
     draw: function() { 
 
     this.$c.beginPath(); 
 
     this.$c.moveTo(100, 100); 
 
     this.$c.lineTo(200, 200); 
 
     this.$c.stroke(); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
<canvas id="myCanvas"></canvas> 
 
<div id="example"> 
 
    <button @click="draw">draw</button> 
 
</div>

---

_{https://vuejs.org/v2/guide/instance.html#Properties-and-Methods}