问题：vue或html在页面创建canvas画布时提示“cannot red property getContext of null“，怎么办？

遇到的问题：

在vue项目中使用SVGA图标时，遇到了canvas画布<cannot read property "getContext" of null.>这样的错误，最后才知道是页面加载顺序引发的问题。

解决思路：

在一般的html页面中，js方法可以放在head中，也可以放在body标签结束前，但是两者是有一定的区别的。

• 在head标签中时，一般只是进行加载，并不立即自动执行，需要被触发后才会执行。因此，当script标签位于此位置时，不会进行javascript中的变量初始化，因此可能出现上述错误；
• 在body标签结束前，javascript会被加载并立即执行。

但是，这次的问题却是疏忽大意没有发现在页面未加载完成的情况下，提前调用了方法导致。

解决方法：

基于以上分析，在一般的html中解决此问题可以有两种方法：

• 直接将script标签置于body标签结束之后；
• script标签位于head标签中时，可以通过引入window.onload等自动触发该事件。

而这次问题的答案，需要先让页面全部加载完成，再调用了方法。