1.监听浏览器加载事件。
window.addEventListener("load",eventWindowLoaded,false);
load事件在html页面加载结束时发生。
第三个参数设置函数是否在事件传递到DOM对象树的底层对象之前捕捉此种类型的事件。
2.引入canvas方法
<canvas>
Your browser does not support HTML5 canvas
</canvas>
判断浏览器是否支持canvas
（1）https://modernizr.com/
（2）使用函数判断
function canvas(){ var canUse=!!document.createElement(‘canvas‘).getContext; if(!canUse){ return; } }
3.包装console.log函数，防止出现不支持此函数时的错误提示
var Debugger=function(){}; Debugger.log=function(message){ try{ console.log(message); }catch(exception){ return; } }
4.动画循环方法
（1）setTimeout
function gameLoop(){ window.setTimeout(gameLoop,20); drawScreen() } gameLoop();
这种方式每次会清除自己，不会永远进行下去，比setInterval对性能更好。但是会出现如果某一帧需要大量计算，但是设置的时间并没有那么长，这样在进入下一帧动画的时候，这一帧并没有完成，这样会造成丢帧； 如果时间设置太长 =》不流畅、视觉卡顿的问题。
（2）requestAnimationFrame()
这种方法是浏览器自动判断下一帧的渲染时间，，不会跳帧、丢帧，但是并不是所有的浏览器都支持。
根据浏览器的性能或者网速快慢来决定，它会保证绘制完这一帧，才会绘制下一帧，保证性能的同时，也保证动画的流畅。
5.使用canvas流程
（0）在html文件上创建canvas标签的DOM节点
（1）判断window是否加载完成。
（2）判断canvas是否支持。
（3）创建context对象
var iCanvas =document.getElementById("canvas"); var iContext=iCanvas.getContext("2d");
（4）开始画图。