基础中的基础。CANVAS step01

　　每天书写一点点。 构思更多新概念。

var log = console.log,
Pt = function(){
var Pt = function(id, type, width, height){
    return new Pt.fn.init(id, type, width, height);
},

_proto = Object.prototype,

_toString = _proto.toString,

_proto = Array.prototype,

_forEach = _proto.forEach || function(db, callback){
    for(var i = 0; i < db.length; i++){
        callback.call(db[i], i, db);
    }
},

_forIn = function(db, callback, args){
    for( var i in db){
        callback.call(db[i],i, db[i], args || db);
    }
},

_listProperties = function (o){
    var objectToInspect,
        result = [];
    for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
        result = result.concat(Object.getOwnPropertyNames(objectToInspect));
    }
    return result;   
},

_type = function(data, type){
    return _toString.call(data)==='[object '+ type +']';
},

fns = {};

Pt.define = function (name, value){

    if(name){
        if(_type(name, 'Object') && !value){
            try{
                return Object.defineProperties(this, name);
            }
            catch(e){
                throw new Error(e);
            }
        }
        else if(_type(name, 'String') && _type(value, 'Object')){
            try{
                return Object.defineProperty(this, name, value);
            }
            catch(e){
                throw new Error(e);
            }
        }
        else{
            throw new Error("UnExpected type error! Unknown type in "+ name + "and "+ value);
        }
    }
    throw new TypeError("UnExpected NullException in name and value!");
};

Pt.prototype = fns;
fns.constructor = Pt;

Pt.define.call(fns,{
    'init': {
        value: function(id, type, width, height){
            if(!!id && _type(id, 'String')){
                this.__info__(id, type || '2d', width, height);    
            }
            return this;
        },
        writable: false,
        enumerable:false,
        configurable:false
    },
    'define': {
        value: Pt.define,
        writable: false,
        enumerable: true,
        configurable: false
    },
    '__info__':{
        value: function(id, type, width, height){
            var node;
            if(type && _type(type, 'String')){
                node = document.getElementById(id);
                width = width || node.offsetWidth;
                height = height || node.offsetHeight;
                this.node =  node;
                this.ctx = node.getContext(type);
                this.width = width;
                this.height = height;
                return this;
            }
            else{
                if( id in this._cache){
                    return this._cache[id];
                }
                return this;
            }
        },
        writable: false,
        enumerable: false,
        configurable: false
    },
    '__layerId2Name__':{
        value: {},
        enumerable: false,
        writable:true,
        configurable:false
    },
    '__layerName2Id__':{
        value: {},
        enumerable: false,
        writable:true,
        configurable:false
    },
    
    '__layerIndex__':{
        value: 0,
        enumerable: false,
        writable:true,
        configurable:false
    },

    'layer': {
        value: function(name, handle, args){

            handle = _type(handle, 'Function') ? handle : 
                    (_type(handle, 'String') && handle in this) ? this[handle] : null;
            if(_type(name, 'String') && handle){
                if(name in this.__layerName2Id__){
                    throw new Error("name has be defined!");
                }
                this.__layerId2Name__[this.__layerIndex__] = name;

                this.__layerName2Id__[name] = {
                    cId: this.__layerIndex__++,
                    handle: handle,
                    args: args
                };

                this.define('__layerIndex__', {
                    value: this.__layerIndex__,
                    enumerable: false,
                    writable: true,
                    configurable:false
                })
                handle.apply(this, args);
            }
            else if(_type(name, 'Object') && !handle){
                _forIn(name, function(i, item, me){
                    me.layer.call(me, i, item.handle, item.args);
                }, this);
            }
            else{
                throw new Error('TypeError! Unknown Type with name and handle!');
            }
            return this;
        },
        writable: false,
        enumerable: true,
        configurable: false
    },
    'removeLayer': {
        value: function(name){
            var layer,
                cId;
            if(name in this.__layerName2Id__){
                layer = this.__layerName2Id__[name];
                cId = layer.cId;
                if(cId in this.__layerId2Name__){

                    // remove id2name
                    delete this.__layerId2Name__[cId];

                    //clean arc
                    this.ctx.clearRect(0,0, this.width, this.height);
                }
                else{
                    throw new Error("Can't find the layer in here! Did u make sure save it in layer or haven't removed?");
                }
                delete this.__layerName2Id__[name];
                _forIn(this.__layerName2Id__, function(i, item, me){
                    this.handle.apply(me, this.args);
                }, this);
            }
            else{
                throw new Error('Name is not in layer');
            }

        }
    }
});

Pt.define({
    'fn':{
        value: fns,
        writable: true,
        configurable: false,
        enumerable: true
    }
});
Pt.fn.init.prototype = Pt.fn;
return Pt;
}();

Pt.fn.define("line",{
    value: function(ox,oy,ex,ey){
        this.ctx.fillStyle="red";
        this.ctx.beginPath();
        this.ctx.moveTo(ox, oy);
        this.ctx.lineTo(ex, ey);
        this.ctx.bezierCurveTo(ox + 30, oy + 30, ox + 30, oy + 30, ex+ 20, ey+ 100);
        this.ctx.lineTo(ox, oy);
        this.ctx.fill();
    },
    enumerable: true,
    writable: false,
    configurable: false
});

var pt = Pt('cvs');
/*pt.line(0,0,200,90);*/
pt.layer('01', 'line', [0,0,200,90]);

pt.layer({
    '03': {
        handle: 'line',
        args: [0,2,10,50]
    },
    '02': {
        handle: 'line',
        args: [30,40,150,500]
    }
});

pt.removeLayer('01');
pt.removeLayer('02');

目前可以简单的实现这些功能了。。

增 删 记录层。

也许明天会更好。