canvas动画requestNextAnimationFrame兼容性写法

 ，采用 window.requestAnimationFrame()实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画，当系统准备好了重绘条件的时候，才调用绘制动画帧。一般每秒钟回调函数执行60次，也有可能会被降低。想要了解更多关于动画循环的信息，尤其是游戏，

// #FFEAAA
window.requestNextAnimationFrame = (function() {
	var originalWebkitRequestAnimationFrame = undefined,
		wrapper = undefined,
		callback = undefined,
		geckoVersion = 0,
		userAgent = navigator.userAgent,
		index = 0,
		self = this;
	if (window.webkitRequestAnimationFrame) {
		wrapper = function(time) {
			if (time === undefined) {
				time = +new Date();
			}
			self.callback(time);
		};
		originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;

		window.webkitRequestAnimationFrame = function(callback, element) {
			self.callback = callback;
			originalWebkitRequestAnimationFrame(wrapper, element);
		}
	}
	if (window.mozRequestAnimationFrame) {
		index = userAgent.indexOf('rv:');

		if (userAgent.indexOf('Gecko') != -1) {
			geckoVersion = userAgent.substr(index + 3, 3);

			if (geckoVersion === '2.0') {
				window.mozRequestAnimationFrame = undefined;
			}
		}
	}
	return window.requestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||

		function(callback, element) {
			var start,
				finish;

			window.setTimeout(function() {
				start = +new Date();
				callback(start);
				finish = +new Date();

				self.timeout = 1000 / 60 - (finish - start);

			}, self.timeout);
		};
}());
window.cancelAnimationFrame = window.cancelAnimationFrame ||
	window.webkitCancelAnimationFrame ||
	window.webkitCancelRequestAnimationFrame ||
	window.mozCancelRequestAnimationFrame ||
	window.oCancelRequestAnimationFrame ||
	window.msCancelRequestAnimationFrame ||
	clearTimeout;