canvas的代码封装

Posted 2020-08-16 lewo的博客

(function(window,document){
    var cs2d = function(selector,options){
        return new cs2d.fn.init(selector,options);
    };

    cs2d.fn = cs2d.prototype = {
        init : function(selector,options){
            var s = this,
            // 父容器 dom
            p = cs2d.is_el(selector)?selector:document.querySelector(selector),
            // canvas dom
            c = document.createElement(‘canvas‘),
            // 默认配置
            config = {
                x : 0,
                y : 0,
                // 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分|!+[1,] 是否是ie浏览器 不考虑ie
                w : p.clientWidth,
                h : p.clientHeight
            };

            // 重置配置
            cs2d.extend(config,options,true);

            // 添加canvas dom入父容器
            p.appendChild(c);

            // 设置父容器属性
            p.style.position = ‘relative‘;
            p.style.overflow = ‘hidden‘;

            // 设置canvas属性
            c.id = ‘canvas_canvas_‘+(++cs2d.canvasId);
            c.width = config.w; // canvas 宽
            c.height = config.h; // canvas 高
            c.style.position = ‘absolute‘;
            c.style.zIndex = cs2d.canvasId;

            // 父容器dom节点缓存
            s.parentNode = p;

            // canvas dom节点缓存
            s.canvasNode = c;

            // 得到 CanvasRenderingContext2D
            s.pen = c.getContext(‘2d‘);

            // 得到 canvas 的宽和高
            s.width = c.width;
            s.height = c.height;

            // 可以显示的对象容器
            s.childList = [];

            /**
             * 进行数据 【getter setter】
             */
            // s.data = {
            //     width : c.width,
            //     height : c.height
            // };
            // // width
            // Object.defineProperty(s,‘width‘,{
            //     get : function(){
            //         console.log(this);
            //         return s.data.width;
            //     },
            //     set : function(val){
            //         c.width = s.data.width = val;
            //     }
            // });
            // // height
            // Object.defineProperty(s,‘height‘,{
            //     get : function(){
            //         return s.data.height;
            //     },
            //     set : function(val){
            //         c.height = s.data.height = val;
            //     }
            // });
        },
        show : function(){
            var s = this, pen = s.pen, k;
            pen.clearRect(0,0,s.width,s.height);
            for(k in s.childList){
                s.childList[k].show(pen);
            }
        }
    };

    // 将 cs2d类的this指向cs2d原型init方法 【即： cs2d[this] = cs2d.prototype.init[this]】
    cs2d.fn.init.prototype = cs2d.fn;

    /**
     * 静态属性
     */
    // canvas 的 id
    cs2d.canvasId = 0;

    /**
     * 
     * @Title type【静态方法】
     *
     * @Description 得到 变量 类型 字符串。
     *
     * @param  {*} data 需要得到类型的变量
     *
     * @return {String}
     * 
     * ‘abc‘              return ‘string‘
     * true               return ‘boolean‘
     * 123,NaN,Infinity   return ‘number‘
     * []                 return ‘array‘
     * {}                 return ‘object‘
     * function(){}       return ‘function‘
     * new Date           return ‘date‘
     * new RegExp         return ‘regexp‘
     * Math               return ‘math‘
     * null               return ‘null‘
     * undefined          return ‘undefined‘
     *
     * 变异类型
     * querySelector      return ‘html*element‘
     * querySelectorAll   return ‘nodelist‘
     * document.images    return ‘htmlcollection‘
     * 
     */
    cs2d.type = function(data){
        return Object.prototype.toString.call(data).slice(8,-1).toLowerCase();
    };

    /**
     * 
     * @Title empty【静态方法】
     *
     * @Description 将变量值转换为布尔值。
     * 规定 ‘‘|null|undefined|NaN|0|{}|[] 都为true，其他变量均为false
     *
     * @param  {Object} data 需要判断的变量
     *
     * @return {Boolean}
     * 
     */
    cs2d.empty = function(data){
        var hasProp = true, prop = ‘‘;

        if ( typeof data === ‘object‘ ) {
            for ( prop in data ) {
                hasProp = false; // 证明该对象存在属性
                break;
            }
            return hasProp;
        }
        return !data;
    };

    // 是否设置【静态方法】
    cs2d.isset = function(data){
        var type = cs2d.type(data);
        return type!==‘null‘&&type!==‘undefined‘;
    };
    // 是否是元素【静态方法】
    cs2d.is_el = function(el){
        return !!(el && el.nodeType == 1);
    };
    // 是否是null【静态方法】
    cs2d.is_null = function(data){
        return cs2d.type(data)===‘null‘;
    };
    // 是否是数组【静态方法】
    cs2d.is_array = function(data){
        return cs2d.type(data)===‘array‘;
    };
    /**
     * 
     * @Title extend【静态方法】
     *
     * @Description 对象合并
     *
     * @param  {Object}       des            源对象
     *
     * @param  {Array|Object} src            对象数组
     *
     * @param  {Boolean}      override       是否重写源对象
     *
     * @return {object}                      返回源对象的引用
     * 
     */
    cs2d.extend = function(des, src, override){

        var i = 0,l = 0,k = null;

        if ( src instanceof Array ) {

            for ( i = 0, l = src.length; i < l; i++ ) {

                cs2d.extend(des, src[i], override);

            }

        } else {

            for ( k in src ) {

                if ( override || !(k in des) ) {

                    des[k] = src[k];
                }

            }
            
        }

        return des;

    };
    /**
     * 
     * @Title each【静态方法】
     *
     * @Description 迭代器
     *
     * @param  {Array}      obj      待迭代对象数组
     *
     * @param  {Function}   callback 迭代回调方法
     *
     * @param  {Object}     context  环境变量,用作回调函数中this的对象
     *
     * @param  {*}          arg      传入迭代回调函数的参数
     *
     * @throws {jsonstringify} 缺少参数
     * 
     */
    cs2d.each = function(obj, callback, context, arg){

        var k     = null

        for ( k in obj ) {

            callback.call( context||null, k, obj[k], arg );

        }
    };

    // 动态扩展方法
    cs2d.fn.extend = function(src, override){
        cs2d.extend(this,src,override);
    };


    /**
     *
     * @Title requestAnimFrame
     * 
     * @Description 做动画的方法，即requestAnimationFrame()，而且基于浏览器的层面也能更好的进行优化
     * 
     */
    var lastTime = 0,vendors = [‘ms‘,‘moz‘,‘webkit‘,‘o‘],x = 0,xl = vendors.length;
    for(;x<xl && !window.requestAnimationFrame;x++){
        window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame‘];
        window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame‘] || window[vendors[x] + ‘CancelRequestAnimationFrame‘];
    }
    // 兼容不支持 requestAnimationFrame 的浏览器
    // 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){
    //     window.clearTimeout(id);
    // };

    window.c = window.cs2d = cs2d;
})(window,document);

cs2d.fn.extend({
    // getPen : function(){
    //     var s = this, pen = s.pen;
    //     return pen;
    // }
});