Рисование на холсте с помощью vue.js
Я не думаю, что это обязательно проблема Vue, но я столкнулся с некоторыми проблемами.
Я хотел бы написать на холст переменную Vue. Если я удаляю vue, мой исходный код работает нормально, однако, если я добавляю Vue, холст фактически не запускается.
Вот мой код
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
var v = new Vue({
el: '#app',
data: {
'exampleContent': 'This is TEXT'
},
watch: {
exampleContent: function(val, oldVal) {
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "black";
ctx.font="20px Georgia";
ctx.fillText(this.exampleContent,10,50);
}
}
});
Если я закомментирую/* var v = new Vue({ ...
начальный бит работает. Если я регистрирую значениеexampleContent
в наблюдателе, который также работает. Но что-то в холсте не работает.
Демо для игры:http://codepen.io/EightArmsHQ/pen/EgGbgR?editors=1010