对html5中canvas的事件模拟及动画编程

html5现在很火，但兼容性问题还是很严重，不比pc下的ie6的问题少，做过智能机html5开发的话，应该明白滴。

html5中的canvas本身是一种像素画板，想实现动画，就必须自己重绘，这点和用dom来现实的动画是有区别的。

用dom的话，你只需要一直改变dom的样式，动画就完成，而canvas中，则是擦出掉上次画的，画上现在的，重复这一过程。

而且在dom中，可以给每个元素设置事件，而canvas内部则没有事件机制，需要自己去模拟。

用OO的方式来写代码，会让代码看起来很清楚，维护方便，我喜欢这种方式，这里有两个类：

　　Stage   舞台类，表示canvas这个舞台。

　　　　　有这些公开的接口，

　　　　　　add(thing)　　　　加入一个物件，thing必须是Thing类的实现类的实例。

　　　　　　addEvent(type,handler)　stage的事件，目前只支持onEnterFrame这个事件，也就是帧频事件，大约是（1000/60）毫秒执行一次

　　　　　　redraw()　　 重绘所有的thing对象。

　　Thing   舞台上所有物件的超类，一个抽象类，可以被放置到舞台中去的，不能直接实例化

　　　　    有两个抽象方法，必须实现，

　　　　　　draw(canvas) 　　会传进来一个canvas画板对象，用于绘制Thing。

　　　　　　isScope(x,y)　　  会传进来鼠标相对于canvas的位置，返回boolean，用于判断鼠标是否在thing的范围，true表示鼠标在范围内，false表示不在。

 　　　　　 有一个公开的方法，

　　　　　　addEvent(type,handler)　　给物件设置事件，实现了onclick,onmouseover,onmousemove,onmousedown,onmouseup,onmouseout等事件。

　　 在下面的代码中，实现了两个类，Ball和Liveball,Ball继承了Thing，并实现了draw和isScope方法，然后LvieBall有继承Ball，然后被加入到stage中。

 

void function(window,document){
    //继承工具函数
    function extend(subClass,supClass){
           var AbstractMethod = {},i;
           for(i in supClass.prototype){
              if(supClass.prototype[i] === extend.AbstractMethod) AbstractMethod[i] = true;
           }
           for(i in subClass.prototype){
              if(AbstractMethod[i] && AbstractMethod[i] ===extend.AbstractMethod) throw Error(i+" Method do not Implement!");
           }
           var fun = function(){},
               prototype = subClass.prototype;
           fun.prototype = supClass.prototype;
           subClass.prototype = new fun();
           for(var i in prototype){
               subClass.prototype[i] = prototype[i];
           }
           subClass.$supClass = supClass;
           subClass.prototype.$supClass = function(){
               var supClass = arguments.callee.caller.$supClass;
               if(typeof supClass == 'function'){
                    supClass.apply(this,arguments);
                    this.$supClass = supClass;
               }
           };
           subClass.prototype.constructor = subClass;
           return subClass;
    }
    //返回翻转的数组
    function Reverse(arr){
        var darr = [],item;
        for(var i=Math.max(arr.length-1,0);i>=0;i--) darr.push(arr[i]);
        return darr;
    }
    //约定的抽象方法
    extend.AbstractMethod = function(){};
    //表示舞台，也就是canvas画布
    function Stoge(canvas){
        this.canvas = canvas;
        this.node = canvas.canvas;
        this.height = this.node.height;
        this.width = this.node.width;
        this.thing = [];
        this.models = [];
        this.fps = 1000/60;
        this.lasttime = new Date();
        this.onEnterFrame = [];
        if(typeof options=== 'object') this.setOption(options);
        this.init();
    }
    Stoge.prototype = {
        //初始化
        init:function(){
            this.BuildEvent();
            var self = this;
            setInterval(function(){
                for(var i=0,len=self.onEnterFrame.length;i<len;i++){
                    typeof self.onEnterFrame[i] == 'function' && self.onEnterFrame[i].call(self);
                }
            },this.fps);
            this.showFPS();
        },
        //添加一个Thing
        add:function(thing){
            if(!thing) return this;
            this.thing.push(thing);
            thing.setStoge(this);
            thing.draw(this.canvas);
        },
        //添加一个模型
        addModel:function(model){
            this.models.push(model);
        },
        //删除一个物件
        remove:function(thing){
            //todo
        },
        //重新绘制所有的thing
        redraw:function(){
            this.canvas.clearRect(0,0,this.width,this.height);
            var i;
            for(i=0,len=this.thing.length;i<len;i++){
                this.thing[i].draw(this.canvas);
            }
            for(i=0,len=this.models.length;i<len;i++){
                this.models[i].draw(this.canvas);
            }
        },
        //绑定事件及派发事件
        BuildEvent:function(){
            var stoge = this;
            this.node.addEventListener('click',function(event){
                var pos = stoge.getMousePosition(event.clientX,event.clientY);
                var thing = Reverse(stoge.thing);
                for(var i=0,len=thing.length;i<len;i++){
                    if(thing[i].isScope(pos.x,pos.y)){
                        thing[i].onClick(pos);
                        break;
                    }
                }
            },false);
            document.body.addEventListener('mousemove',function(event){
                
                var pos = stoge.getMousePosition(event.clientX,event.clientY);
                var thing = Reverse(stoge.thing);
                for(var i=0,len=thing.length;i<len;i++){
                    if(thing[i].isScope(pos.x,pos.y) && !thing[i].getMouseState() && 'onMouseOver' in thing[i]){
                        thing[i].onMouseOver(event,pos);
                        break;
                    }else if(!thing[i].isScope(pos.x,pos.y) && thing[i].getMouseState() && 'onMouseOut' in thing[i]){
                        thing[i].onMouseOut(event,pos);
                        break;
                    }
                }
                for(var i=0,len=thing.length;i<len;i++){
                    if((thing[i].isScope(pos.x,pos.y) || thing[i].isMouseDown)){
                        if('onMouseMove' in thing[i]){
                            thing[i].onMouseMove(event,pos);
                        }
                        thing[i].setMouseState(true,pos);
                    }else{
                        thing[i].setMouseState(false,pos);
                    }
                }
                
            },false);
            this.node.addEventListener('mouseout',function(event){
                var pos = stoge.getMousePosition(event.clientX,event.clientY);
                var thing = Reverse(stoge.thing);
                for(var i=0,len=thing.length;i<len;i++){
                    var pos2 = thing[i].getMouseLastPos();
                    if(thing[i].isScope(pos2.x,pos2.y) && 'onMouseOut' in thing[i]){ 
                        thing[i].onMouseOut(pos);
                        break;
                    }
                }
            },false);
            this.node.addEventListener('mouseover',function(event){
                var pos = stoge.getMousePosition(event.clientX,event.clientY);
                var thing = Reverse(stoge.thing);
                for(var i=0,len=thing.length;i<len;i++){
                    if(thing[i].isScope(pos.x,pos.y) && 'onMouseOver' in thing[i]){
                        thing[i].onMouseOver(event,pos);
                        break;
                    }
                }
            },false);
            this.node.addEventListener('mousedown',function(event){
                var pos = stoge.getMousePosition(event.clientX,event.clientY);
                var thing = Reverse(stoge.thing);
                for(var i=0,len=thing.length;i<len;i++){
                    if(thing[i].isScope(pos.x,pos.y) && 'onMouseDown' in thing[i]){
                        thing[i].onMouseDown(event,pos);
                        break;
                    }
                }
            },false);
            document.body.addEventListener('mouseup',function(event){
                var pos = stoge.getMousePosition(event.clientX,event.clientY);
                var thing = Reverse(stoge.thing);
                for(var i=0,len=thing.length;i<len;i++){
                    if((thing[i].isScope(pos.x,pos.y) || thing[i].isMouseDown)&& 'onMouseUp' in thing[i] ){
                        thing[i].onMouseUp(event,pos);
                    }
                }
            },false);
        },
        addEvent:function(type,handler){
            switch(type){
                case 'onEnterFrame':
                    this.onEnterFrame.push(handler);
                    break;
            }
        },
        //获得canvas节点在页面中的位置
        getNodePosition:function(){
            var top = 0, left = 0,node = this.node;
            do{
                top += node.offsetTop;
                left += node.offsetLeft;
            }while(node = node.offsetParent);
            return {top:top,left:left};
        },
        //获得鼠标相对于canvas中的位置
        getMousePosition:function(clientX,clientY){
            //文档中鼠标的位置
            var mouseY = clientY + document.documentElement.scrollTop,
                mouseX = clientX + document.documentElement.scrollLeft;
            //文档中元素的位置
            var canvasPos = this.getNodePosition();
            //鼠标在canvas中的位置
            var x = mouseX - canvasPos.left,
                y = mouseY - canvasPos.top;
            return {x:x,y:y};
        },
        //测试一个thing的是不是碰到边界
        testOutBorder:function(thing){
            var isInBorder = true;
            if(thing.x+thing.width/2 > this.width){
                isInBorder = false;
            }
            if(thing.x-thing.width/2 < 0){
                isInBorder = false;
            }
            if(thing.y+thing.height/2 > this.height){
                isInBorder = false;
            }
            if(thing.y-thing.height/2 < 0){
                isInBorder = false;
            }
            return isInBorder;
        },
        //判断两个thing是否有碰撞
        testOverlap:function(one,two){
            var x = two.x - one.x,
                y = two.y - one.y,
                l = Math.sqrt(x*x+y*y),
                angle,
                radian;
            if(one.radius+two.radius >= l){

                radian = Math.atan2(y,x);
                var sin = Math.sin(radian);
                var cos = Math.cos(radian);
                var pos0 = {x:0,y:0};
                
                var pos1 = this.rotate(x,y,sin,cos,true);
                var vel0 = this.rotate(one.ax,one.ay,sin,cos,true);
                var vel1 = this.rotate(two.ax,two.ay,sin,cos,true);
                
                
                var vxTotal = vel0.x - vel1.x;
                vel0.x = ((one.mass - two.mass) * vel0.x + 2 * one.mass * vel1.x)/(one.mass+two.mass);
            
                vel1.x = vxTotal + vel0.x;
                var absV = Math.abs(vel0.x) + Math.abs(vel1.x);
                var overlap = (one.radius+two.radius) - Math.abs(pos0.x-pos1.x);
                
                pos0.x += vel0.x / absV * overlap;
                pos1.x += vel1.x / absV * overlap;
                var pos0f = this.rotate(pos0.x,pos0.y,sin,cos,false);
                var pos1f = this.rotate(pos1.x,pos1.y,sin,cos,false);
                two.x = one.x + pos1f.x;
                two.y = one.y + pos1f.y;
                one.x = one.x + pos0f.x;
                one.y = one.y + pos0f.y;

                var vel0f = this.rotate(vel0.x,vel0.y,sin,cos,false);
                var vel1f = this.rotate(vel1.x,vel1.y,sin,cos,false);
                one.ax = vel0f.x;
                one.ay = vel0f.y;
                two.ax = vel1f.x;
                two.ay = vel1f.y;
            }
        },
        
        //获得改变角度后的位置
        rotate:function(x,y,sin,cos,reverse){
            var result = {};
            if(reverse){
                result.x = x * cos + y * sin;
                result.y = y * cos - x * sin;
            }else{
                result.x = x * cos - y * sin;
                result.y = y * cos + x * sin;
            }
            return result;
        },
        showFPS:function(){
            var self = this;
            var fps = {
                draw:function(canvas){
                    var now = new Date();
                    canvas.save();
                    canvas.fillStyle = "#ccc";
                    canvas.font = "15px 微软雅黑";
                    canvas.fillText("拽拽小球看看", 10,20);
                    canvas.restore();
                    self.lasttime = new Date();
                }
            };
            
            this.addModel(fps);
        }
    };
    //物品抽象类
    function Thing(x,y){
        this.stoge = null;
        this.x = x;
        this.y = y;
        this.vx = x;
        this.vy = y;
        this.width = null;
        this.height = null;
        this.MouseLastState = false;
        this.MouseLastPos = null;
        this.isMouseDown = false;
        this.onClickList = [];
        this.onMouseOverList = [];
        this.onMouseOutList = [];
        this.onMouseMoveList = [];
        this.onMouseDownList = [];
        this.onMouseUpList = [];
    }
    Thing.prototype = {
        //抽象方法
        drow:extend.AbstractMethod,
        isScope:extend.AbstractMethod,
        addEvent:function(type,EventHander){
            type = type.toLowerCase();
            switch(type){
                case 'click':
                    this.onClickList.push(EventHander);
                break;
                case 'mouseover':
                    this.onMouseOverList.push(EventHander);
                break;
                case 'mouseout':
                    this.onMouseOutList.push(EventHander);
                break;
                case 'mousemove':
                    this.onMouseMoveList.push(EventHander);
                break;
                case 'mousedown':
                    this.onMouseDownList.push(EventHander);
                break;
                case 'mouseup':
                    this.onMouseUpList.push(EventHander);
                break;
            }
        },
        onClick:function(event,pos){
            for(var i=0,len=this.onClickList.length;i<len;i++){
                this.onClickList[i].call(this,event,pos);
            }
        },
        onMouseOver:function(event,pos){
            for(var i=0,len=this.onMouseOverList.length;i<len;i++){
                this.onMouseOverList[i].call(this,event,pos);
            }
        },
        onMouseOut:function(event,pos){
            for(var i=0,len=this.onMouseOutList.length;i<len;i++){
                this.onMouseOutList[i].call(this,event,pos);
            }
        },
        onMouseMove:function(event,pos){
            for(var i=0,len=this.onMouseMoveList.length;i<len;i++){
                this.onMouseMoveList[i].call(this,event,pos);
            }
        },
        onMouseDown:function(event,pos){
            this.isMouseDown = true;
            for(var i=0,len=this.onMouseDownList.length;i<len;i++){
                this.onMouseDownList[i].call(this,event,pos);
            }
        },
        onMouseUp:function(event,pos){
            if(!this.isMouseDown) return;
            this.isMouseDown = false;
            for(var i=0,len=this.onMouseUpList.length;i<len;i++){
                this.onMouseUpList[i].call(this,event,pos);
            }
        },
        setMouseState:function(isIn,pos){
            this.MouseLastState = isIn;
            this.MouseLastPos = pos;
        },
        getMouseState:function(){
            return this.MouseLastState;
        },
        getMouseLastPos:function(){
            return this.MouseLastPos;
        },
        setStoge:function(stoge){
            this.stoge = stoge;
        }
    }
    function Ball(x,y,radius,strokeStyle,fillStyle){
        this.$supClass(x,y);
        radius = radius || 10;
        this.radius = radius;
        this.strokeStyle = strokeStyle;
        this.fillStyle = fillStyle;
        
    }
    Ball.prototype = {
        draw:function(canvas){
            canvas.save();
            if(this.strokeStyle)canvas.strokeStyle = this.strokeStyle;
            if(this.fillStyle)canvas.fillStyle = this.fillStyle;
            canvas.beginPath();
            canvas.arc(this.x,this.y,this.radius,0,6);
            canvas.closePath();
            if(this.strokeStyle)canvas.stroke();
            if(this.fillStyle)canvas.fill();
            canvas.restore();
            this.width = this.radius*2;
            this.height = this.radius*2;
        },
        isScope:function(x,y){
            var fx = this.x-x,
                fy = this.y-y,
                distance = Math.sqrt(Math.pow(fx,2)+Math.pow(fy,2));
            if(distance <= this.radius)
                return true;
            else
                return false;
        },
    };
    extend(Ball,Thing);
    
    function LiveBall(x,y,radius,mass,strokeStyle,fillStyle){
        this.$supClass(x,y,radius,strokeStyle,fillStyle);
        this.vy = 1.7;
        this.ax = 0;
        this.ay = 0;
        this.f = .8;
        this.mass = mass;
        this._isMouseDown = false;
        this.BuildEvent();
    }
    LiveBall.prototype = {
        BuildEvent:function(){
            this.addEvent('mousedown',function(event,pos){
                clearTimeout(this._resource);
                this._isMouseDown = true;
                this._downX = pos.x - this.x;
                this._downY = pos.y - this.y;
                this._sx = pos.x;
                this._sy = pos.y;
            });
            this.addEvent('mouseup',function(event,pos){
                this._isMouseDown = false;
                var dx = pos.x - this._sx,
                    dy = pos.y - this._sy,
                    di = Math.sqrt(dx*dx+dy*dy),
                    su = di/10;
                    this.ax = su * dx * this.f;
                    this.ay = su * dy * this.f;
            });
            this.addEvent('mousemove',function(event,pos){
                if(this._isMouseDown){
                    clearTimeout(this._resource);
                    this.x = pos.x - this._downX;
                    this.y = pos.y - this._downY;
                    this.stoge.redraw();
                    var self = this;
                    this._resource = setTimeout(function(){
                        self._sx = pos.x;
                        self._sy = pos.y;
                    },10);
                }
            });
        }
    };
    function ra(a,b){
        b = b || 10;
        a = a || 10;
        return parseInt((Math.random()*a)+b);
    }
    function rac(){
        return '#'+(parseInt(Math.random()*15)).toString(16)+(parseInt(Math.random()*15)).toString(16)+(parseInt(Math.random()*15)).toString(16);
    }
    extend(LiveBall,Ball);
    var dom =  document.getElementById('can');
    var ctx = dom.getContext('2d');
    var stoge = new Stoge(ctx);
    stoge.addEvent('onEnterFrame',function(){
            var one,two;
            for(var i=0,len=this.thing.length;i<len;i++){
                one = this.thing[i];
                if(!one._isMouseDown){
                    one.x += one.ax * 0.07;
                    one.ay += one.vy;
                    one.y += one.ay * 0.07;
                    if(one.y+one.radius >= this.height){
                        one.y = this.height - one.radius;
                        one.ay = -(one.ay * one.f);
                    }
                    if(one.y-one.radius <= 0){
                        one.y = one.radius;
                        one.ay = -(one.ay * one.f);
                    }
                    if(one.x+one.radius >= this.width){
                        one.x = this.width - one.radius;
                        one.ax = -(one.ax * one.f);
                    }
                    if(one.x-one.radius <= 0){
                        one.x = one.radius;
                        one.ax = -(one.ax * one.f);
                    }
                }
                for(var t=0,tlen=this.thing.length;t<tlen;t++){
                    two = this.thing[t];
                    one !== two && this.testOverlap(one,two);
                }
            }
            this.redraw();
        });
    for(var i=0;i<10;i++){
        var radius = ra(20,20);
        var mass = (radius/40) * 20;
        var th = new LiveBall(ra(700,1),ra(100,1),radius,mass,null,rac());
        th.ax = ra(0,0);
        th.ay = ra(0,0);
        stoge.add(th);

    }

}(window,document);