canvas学习总结

/**
 * 1、制作动画使用window.requestAnimationFrame方法，体验更好
 * requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
 * 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
 * requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销
 */
(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz','ms','o'],x,len = vendors.length;
    for(x = 0; x < len && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());
/**
 * 2、绘制线等基础方法，在计算整数的基础上+0.5，处理锯齿情况
 */
var getFloatVal = function(x){
    return Math.ceil(x)+ 0.5|| Math.floor(x)+0.5||Math.round(x)+0.5;
};

/**
 * 3、excanvas.js
 * 他是利用IE支持的VML对象来模拟Canvas的绘图的。
 * ecxcanvas.js首先创建Canvas对象，
 * 然后把所有有关Canvas的绘图操作都用相应的VML对象来实现，所以我们在低版本的ie中也能看到Canvas图像了
 */
//G_vmlCanvasManager_.init();这句语句遍历了页面中所有的canvas元素，然后初始化这些元素，
// 亦即是将标准canvas的那些个方法赋予ie下的canvas
//动态创建canvas时需要自己执行该方法