(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;
// }
});