HTML5尝鲜(让canvas像flash一样工作,从而制作复杂的动画)

效果和源码:(本代码使用了本人自己的js框架,自己修改代码的话,请务必引用我试用的框架,否则会出现错误)

(请务必试用非ie浏览器浏览,极力推荐Safari和chrome,其他浏览器运行速度堪忧)

 

http://www.beiju123.cn/blog/wp-content/uploads/2010/02/canvas-demo.html

 

1.什么是canvas:

引用Firefox开发者中心的一段话:<canvas> is a new HTML element which can be used to draw graphics using scripting (usuallyJavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas>implementations which we will see later in this tutorial.

注意,canvas主要是用来画图的,而不是注重动画,所以在canvas中没有帧的概念,没有精灵(Sprite)的概念,flash中的概念在canvas中很多都不存在.

canvas说白了,就是给js加了几个对象,多了几个方法.并不是一个独立的东西,应该说是JavaScript的一点点补充.就跟其他编程语言中的graphic对象差不多,提供了画基本图形和路径,图像,提供了颜色和样式管理.

更多关于canvas的基础,见https://developer.mozilla.org/en/Canvas_tutorial(英文版)

 

---

2.基本的动画:

可能很多人会嚼的我这篇文章纯属多余,既然能够画图,那加上一个定时器不就是动画了嘛?

是的,如果你只是想在画布上画出一个圆或者矩形,然后让它动起来的话,那这么做无疑是可以得出结果的.代码也很简单,如下:

var x=0;
    var y=0;
    var ctx = document.getElementById('canvas').getContext('2d');
    setInterval(function(){
        ctx.clearRect(0,0,800,800);//清除画布某某个范围内的内容,参数分别为x,y,宽度,高度
        ctx.fillStyle = '#FFF'//设置颜色
        ctx.fillRect(x++,y++,50,50)//画一个矩形,参数为:x,y,宽,高
    })

效果就是一个方块在画布上向右下角移动.

---

3.升级需求:

动画往往不是如此简单,在flash里,复杂的动画里会包含很多元素,有剪辑,有精灵,他们之间还有包含关系,我们可以单独控制某个元素的移动,控制速度,控制属性.flash里有帧,我们可以在帧上放置元素,控制帧速.最重要的,做复杂的动画的时候,我们需要把每个元素抽象成一个完整的对象,例如:一个人对象啊,我们需要控制它走动,控制它攻击.

可是在canvas里面,图形并不是一个对象,在整个canvas元素里,有且只有只有一个画布的对象(多次创建的话,只会创建一个引用),如果想把里面的图形作为对象来控制的话,上面的动画方法就做不到了.这个时候,考虑一下flash的工作原理,我想出了如下的解决方案.

---

4.让画布里的图形变成可以控制的对象:

我们现在需要一种新的方法,这种方法可以让画布上的元素变成可以单独控制的对象.而画布上其实只有一个对象,怎么让它能承载多个动画对象呢?

我们想想flash的工作原理吧,flash中最基本的两个东西,一个是帧,一个是精灵(Sprite).下面我们就给我们的动画程序添加这两个概念.

首先是帧,我们通过一个定时器,每隔一段时间就重画一下画布,在这段时间里我们改变画布上的元素的位置,这样就是最基本的帧了.

然后现在问题就是如何控制画布上元素的属性呢?我们把画布上所有要用到的动画元素都抽象出来,每个元素都抽象成一个对象,这个对象拥有位置和大小,速度等信息.然后在每一帧重画画布的时候,我们遍历这些对象,调用它们自己的draw方法,让它们根据自己的属性把自己画到画布上.我们将这些元素统称为Sprite,也就是动画精灵.

现在,我们就可以控制这些动画元素了,因为它们都被抽象成了对象,可以有自己的属性和方法,他们都要实现一个接口.虽然在js中不存在接口的概念,但是我们要自己去衡量在每个扩展的精灵里是否都实现了接口的方法.因为这些方法都是必须的.我们把这个接口定义成如下的样子:

 /**
     * 精灵对象,类似flash(ActionScript3.0)中的精灵.
     * 所有的动画元素都必须继承自此对象,继承之后自动拥有move方法和速度属性
     * 每个动画元素都必须拥有一个自己的特殊的draw()方法的实现,这个方法用来在渲染每一帧的时候指定自己如何呈现在canvas帧画布上
     * 注意这个所谓的"帧画布"不是指原生的canvas元素,而是指下面定义的一个Canvas对象,此对象的意义就是一个帧,它负责把需要在这一帧上呈现的
     * 图形画在canvas上,然后每一帧开始的时候都会清除上次画的,类似flash中的帧概念
     *
     * 
     */
    var Sprite=function(){
        this.speed={
            x:1,
            y:1
        }
    }
    Sprite.prototype={
        /**
         *每个精灵都必须有自己的draw实现
         */
        draw:function(){

        },
        /**
         *无需单独实现,通用的动画函数
         */
        move:function(){
            this.x+=this.speed.x;
            this.y+=this.speed.y;
            if(this.childs!=null&&this.childs.length>0){
                for(var i=0;i<this.childs.length;i++){
                    this.childs[i].speed=this.speed;
                    this.childs[i].move();
                }
            }
        },
        /**
         *向此精灵添加一个子精灵
         */
        appendChild:function(sprite){
            if(this.childs==null) this.childs=[]
            this.childs.push(sprite)
        },
        /**
         *渲染子精灵
         */
        drawChild:function(){
            if(this.childs!=null&&this.childs.length>0){
                for(var i=0;i<this.childs.length;i++){
                    this.childs[i].draw();
                }
            }
        }
    }

下面定义一个帧的对象,我们将其命名为:Canvas.

/**
     *帧对象,每隔一段时间重画自己一次,类似flash中的帧概念
     *原理就是每到一定时间就清除canvas,然后调用当前帧里的所有的动画元素的draw()方法,将所有动画元素按照新的配置重画
     *从而生成动画,之后程序无需关心元素的重画,只需要调整元素属性即可,这个对象会自动管理元素的渲染
     *
     */
    var Canvas=function(){
        this.interval=null;
        this.sprites=[]
    }
    /**
     *
     */
    Canvas.prototype={
        /**
         * 开始动画
         */
        begin:function(){
            this.interval=setInterval((function(param){
                return function(){param.render();}
            })(this),20);
        },
        /**
         *渲染
         */
        render:function(){
            //    M.trace(this.sprites.length)
            this.ctx.clearRect(-800, -800, 1600, 1600)
            for(var i in this.sprites){
                if(typeof(this.sprites[i])=="function") continue;
                this.sprites[i].draw();
            }
        },
        /**
         *添加动画元素
         */
        addSprite:function(name,sprite){
            this.sprites[name]=sprite;
        },
        /**
         * 停止动画
         */
        stop:function(){
            clearInterval(this.interval)
        },
        clear:function(){
            for(var i in this.sprites){
                if(typeof(this.sprites[i])=="function") continue;
                if(this.sprites[i].x>800&&this.sprites[i].y>800){
                    delete this.sprites[i]
                }
            }
        }
    }

上面两个对象:精灵和帧.是本文讨论中的重点,有了他们,我们就可以开始组建我们的高级动画程序了.

---

5.开始我们的动画之旅吧:

基础有了,那我们就开始构建动画吧,首先注意上面两个对象,其中的精灵并不是真实的对象,而只是提供一个类似接口的东东,如果我们想构建动画的话,我们需要构建一个继承自精灵的真正的对象.

下面,我们构建一个圆环对象,然后实例化多个圆环对象,之后控制这些实例的运作:

 /**
     * 圆对象
     *
     * @param {Content2d} 一个canvas实例
     * @param {number} 初始x坐标
     * @param {number} 初始y坐标
     * @param {number} 半径
     * @param {json} 配置信息
     */
    var Circle=function(ctx,x,y,radius,config){
        this.ctx=ctx;
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.config={
            strokeStyle:"#000",
            lineWidth:"1"
        }
        M.dom.mixin(this.config, config)
    }
    Circle.prototype=new Sprite();
    /**
     *draw方法的实现
     */
    Circle.prototype.draw=function(){
        this.ctx.beginPath();
        this.ctx.lineWidth = this.config.lineWidth;
        this.ctx.strokeStyle =this.config.strokeStyle;
        this.ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true)
        this.ctx.stroke();
        this.drawChild();
    }

这就是一个基础的圆环的对象,当然你可以给它添加其他任何属性和方法来使它看起来和动起来像一个真正的"对象"(智能对象?)

下面是重要的一步,通过这一步我们在画布上产生100个圆环,它们的位置会是随机的,而且它们向着不同的方向前进:

首先,我们初始化我们的动画程序:

    var ctx=$("canvas").getContext('2d');
    var can=new Canvas();
    can.ctx=ctx;
    can.begin();//开始渲染
    setInterval(function(){
        for(var i in can.sprites){
            if(typeof(can.sprites[i])=="function") continue;
            can.sprites[i].move()
        }
    },20)//这里就是帧速了,这里是50帧每秒

然后我们创建100个圆环:

    for(var i=0;i<100;i++){
        var circle=new Circle(ctx,0,0,m.random(30))
        circle.speed={x:Math.random(4),y:Math.random(4)}
        can.addSprite(i, circle)
    }

如果此时打开此网页,你会发现一百个圆环从原点处开始向右下角移动了.速度不同,方向不同,俨然一群小生命.俨然一群真正的对象.

具体原理,请揣摩源代码:

---

6.其他

我在程序里还添加了一个特性,让精灵有了层级的概念,类似flash中的剪辑,当然还很不完善,只是做个演示,这里也就不介绍如何使用了,回头我还要好好修改一下,让精灵变成影片剪辑的概念.这样才能创作出更加复杂的动画

回头等先做个游戏演示一下.canvas看起来简单,其实要想做出大型的东西来还是需要好好思考的.

后期还会写文章介绍,感兴趣的可以关注一下.