canvas的代码封装
(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;
// }
});
canvas的代码封装的更多相关文章
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...
- java代码封装与编译
代码封装: 在这个java程序内调用另一个类 在arrayTool中把这两个函数封装起来. 编译顺序:(由下文可知应该是先进行语法检查再进行编译) 先编译ArrayTool再编译ArrayOperat ...
- 将PL/SQL代码封装在机灵的包中
将代码封装在机灵的包中 http://www.oracle.com/technetwork/issue-archive/2013/13-jan/o13plsql-1872456.html 绝大多数基于 ...
- 【转】利用Boost.Python将C++代码封装为Python模块
用Boost.Python将C++代码封装为Python模块 一. 基础篇 借助Boost.Python库可以将C/C++代码方便.快捷地移植到python模块当中,实现对python模块的扩 ...
- 将自己写的HDL代码封装成带AXI总线的IP
将自己写的HDL代码封装成带AXI总线的IP 1.Tools->create and package IP 2.create AXI4总线的IP 3.新建block design 4.点击右键, ...
- MVP+Dagger2+Rxjava+Retrofit+GreenDao 开发的小应用,包括新闻、图片、视频3个大模块,代码封装良好
练习MVP架构开发的App,算是对自己学过的知识做一个总结,做了有一段时间,界面还算挺多的.代码量还是有的,里面做了大量封装,总体代码整理得非常干净,这个我已经尽力整理了. 不管是文件(java.xm ...
- android:Android 6.0权限控制代码封装
新建的Activity类可以继承这个Activity,这个类封装了关于新版的权限处理相关的代码 使用方法: package com.glsite.phone; import android.conte ...
- 【Selenium05篇】python+selenium实现Web自动化:读取ini配置文件,元素封装,代码封装,异常处理,兼容多浏览器执行
一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第五篇博 ...
- Ajax实现原理,代码封装
都知道实现页面的异步操作需要使用Ajax,那么Ajax到是怎么实现异步操作的呢? 首先需要认识一个对象 --> XMLHttpRequest 对象 --> Ajax的核心.它有许多的属性和 ...
随机推荐
- 分布式架构高可用架构篇_03-redis3集群的安装高可用测试
参考文档 Redis 官方集群指南:http://redis.io/topics/cluster-tutorial Redis 官方集群规范:http://redis.io/topics/cluste ...
- [ZZ] Cache
http://blog.sina.com.cn/s/blog_6472c4cc0102duzr.html 处理器微架构访问Cache的方法与访问主存储器有类似之处.主存储器使用地址编码方式,微架构可以 ...
- Open vSwitch流表应用实战
本文参考:Open vSwitch流表应用实战 一个通过改变流表下发而实现的互相通信实验. 实验目的: 掌握Open vSwitch下发流表操作: 掌握添加.删除流表命令以及设备通信的原理. 原理:. ...
- docker安装与启动
安装docker [root@localhost /]# yum -y install docker-io 更改配置文件 [root@localhost /]# vi /etc/sysconf ...
- mysql之触发器trigger 详解
为了梦想,努力奋斗! 追求卓越,成功就会在不经意间追上你 mysql之触发器trigger 触发器(trigger):监视某种情况,并触发某种操作. 触发器创建语法四要素:1.监视地点(table) ...
- passing parameters by value is inefficient when the parameters represent large blocks of data
Computer Science An Overview _J. Glenn Brookshear _11th Edition_C Note that passing parameters by va ...
- mysql sql技巧篇
1.left join 需要注意的事项 以左表为基准,匹配右表,如果右表匹配了两条,那么,就生成两条记录,而这两条记录的坐表信息都是一样的. 之前误以为,右表不会影响记录的条数.select 部分,不 ...
- hbase基本命令
基本命令 建表scores 具有两个列族grad 和courese create 'scores','grade', 'course' 查看当前HBase中具有哪些表 list 查看表结构 des ...
- Android 学习
入门: Android疯狂讲义 http://hukai.me/android-training-course-in-chinese/index.html http://segmentfault.co ...
- java NIO ;mvn
http://ifeve.com/java-nio-scattergather/ mvn introduction(install,conf, proxy,plugin,samples) http:/ ...