canvasnode的设计思路和api介绍
html5最近两年的呼声是越来越高了，电脑操作系统有windows、mac os、linux和新加入战团的chrome os，另外，被广泛看好的移动互联网还有苹果、安卓、黑莓和赛班，操作系统大战空前激烈，b/s结构应用的需求空前高涨。之前的web前端技术虽然借助dhtml、ajax和一些hack技术例如comet，已经很有表现力了，但新一代的web前端技术html5提供了更多强大的新功能，无需借助flash和silverlight，无需hack，就可以实现炫丽的富媒体效果，接口是那样简单，大部分麻烦事全都由浏览器引擎替我们代劳。而浏览器的标准化进程这两年来推进得特别快，就连老大难ie，也在最新版的ie9一改特立独行的个性，成了个乖宝宝。不要抱怨ie6还未被淘汰，不要抱怨高端智能手机还未普及，一切只是时间问题，而且照现在的形势看来，html5不会很久远的。一切是那么美好，web前端的大放异彩的日子就要来临了，而现在只是黎明前最后的黑暗。
好了，煽情就到此为止吧，说点实质的东西。包括css3在内，广义的html5提供了众多强大的新功能：多线程、表单2.0、本地存储、地理位置、圆角、css动画等等等等，但我个人感觉，其中最耀眼的明星为以下三个：web socket、canvas和css的transform，这三个功能的张力，为web前端开发的想象空间提供了几乎无限的可能性。今天要说的是其中的canvas。
html5提供了canvas元素，利用它可以随心所欲地在其上绘制复杂图案。它工作在一个非常底层的工作层面，其实是把双刃剑，一方面，通过算法，结合setTimeout和setInterval，可以无视文档流，无视DOM，无视块级元素行内元素，用canvas绘制让人惊奇的效果，另一方面，它失去了DOM机制的便利，无法使用appendChild，addEventListener等功能，让canvas绘制出来的元件，只能“看”，不能“用”。
canvasnode是我写的一个js类库，说是类库，其实它只提供了两个类。设计这个类库的原因，就是想为canvas绘制的元件提供类似DOM的接口，方便进行canvas相关的开发，比如说appendChild、removeChild、addEventListener等等。
好了，废话不多说了，直接上实例吧。让我们一起来看看canvasnode都提供了哪些api，又该如何使用它。
http://www.adanghome.com/js_demo/6/
=======================================================================
canvasnode提供了两个类：CANVASNODE.Manager和CANVASNODE.Node。
CANVASNODE.Manager
【有以下属性】：
x ：相对x坐标
y ：相对y坐标
z ：相对z坐标
childNodes ： 儿子节点
parentNode : 父节点
canvas : 所在的canvas节点
context ： 所在的canvas节点的上下文
width : 宽
height : 高
area : 范围
manager : 管理对象
handlers ：事件处理器
id : 对象id
fps : 刷新率
【有以下方法】：
render : 渲染
appendChild : 添加子节点
removeChild ：删除子节点
getClass : 获取类名
draw : 绘制接口，空方法，由用户自己实现
getNodes : 获取所有子孙节点
getX : 获取x轴绝对坐标
getY : 获取y轴绝对坐标
getZ : 获取z轴绝对坐标
clear : 清空画布
startFlash ： 开始自动刷新
stopFlash ： 停止自动刷新
getEventTarget ： 获取事件发生对象
CANVASNODE.Node
【有以下属性】：
x ：相对x坐标
y ：相对y坐标
z ：相对z坐标
childNodes ： 儿子节点
parentNode : 父节点
canvas : 所在的canvas节点
context ： 所在的canvas节点的上下文
width : 宽
height : 高
area : 范围
manager : 管理对象
handlers ： 事件处理器
id : 对象id
eventSort : 事件优先级
dragRange ： 可拖动范围
【有以下方法】：
render : 渲染
appendChild : 添加子节点
removeChild ：删除子节点
getClass : 获取类名
draw : 绘制接口，空方法，由用户自己实现
getNodes : 获取所有子孙节点
getX : 获取x轴绝对坐标
getY : 获取y轴绝对坐标
getZ : 获取z轴绝对坐标
addEventListener ：监听事件
fire ：触发事件
removeEventListener ： 删除事件监听
show ： 显示
hide ： 隐藏
hitTest ： 碰撞检测
startDrag ： 启动拖动
stopDrag ： 禁止拖动
startDrop ： 启动放置
stopDrop ： 禁止放置
isDropAble ： 检测是否可放置
关于addEventListener，可以监听的事件包括mousedown、mousemove、mouseup、mouseover、mouseout、click、dblclick、甚至包括html5新增的事件dragstart、drag、dragend、dragenter、dragover、dragleave和drop。可以通过在处理函数中return false来停止事件冒泡。但其实canvasnode的冒泡和DOM并不相同，没有搞那么麻烦，子级父级一级一级往上传，而是通过eventSort属性来设定事件响应优先级的。
canvasnode不关心用户具体绘制的图形长什么样，只关心“容器”的width、height、x、y、z和parentNode等因素，容器内的图形通过实现draw方法来绘制。默认情况下，canvasnode会自动开启刷屏，以每秒30帧的速度重绘canvas内所有元件。用户可以改变fps的值，也可以关闭自己刷屏，自己手动调render方法来刷屏。
canvasnode最大的不足是容器必须是矩形的，如果想实现一个不规则形状的容器，canvasnode就无能为力了。
