VueJS 2 导致 HTML5 Canvas 绘制的图像无法显示

发布时间: 2017-01-20 11:34:18 作者: 大象笔记

在使用 vuejs 2.1.8 时,出现一个奇怪的问题,原页面 canvas 绘制的图像,之前可以正常显示。

但是引入 vuejs 2 ,并实例了一个 vue 对象,图像在页面刷新后就不显示了。只有当动画继续绘制几秒之后,才会出现。console 中也没有任何报错信息,通过日志来看,js 代码的确运行正常,只是看不到图像。。。

代码结构如下

var ctx = document.getElementById('ca').getContext('2d');
var app = new Vue(...);

完全没有头绪,只能 Google 了,发现一个完全类似的情况 Vue interfering with HTML5 canvas somehow? - Help - Vue Forum

参照里面的方法,将 vue 对象的定义置前就可以了

var app = new Vue(...);
var ctx = document.getElementById('ca').getContext('2d');

虽然可以正常显示了,但是完全不知道问题产生的原因是什么!

我是一名山东烟台的开发者,联系作者