VueJS + Canvas-Contextはどのようにリンクできますか？

Question

私はVueJSを使用し、Canvas-ContextにHTML-Canvasを組み込みたいと思います。私は私のmain.jsに始まっ

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

：：私はのように私のcomponents内からcontextを呼び出すしたいと思います

さらに

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を使用しないでください。矢印関数は親コンテキストにバインドされているので、は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}