Problems encountered:
When using the SVGA icon in a Vue project, I encountered Canvas Canvas <; cannot read property "getContext" of null.> Such an error, it is finally known that the page load order caused the problem. Solution: In a normal HTML page, a js method can be placed either in the head or before the end of the body tag, but there are some differences. When in the head tag, it is usually just loaded and not automatically executed immediately. It will only be executed after being triggered. Therefore, when the script tag is in this location, variables in JavaScript are not initialized, so the above error may occur; Before the end of the body tag, the JavaScript is loaded and executed immediately. This time, however, the problem was that the method was called before the page had finished loading. Solution: Based on the above analysis, there are two ways to solve this problem in normal HTML: Put the script tag directly after the end of the body tag. When the script tag is in the head tag, you can automatically fire this event by introducing something like window.onload. This time, the answer is to let the page load completely before calling the method.