html5水池,分享用canvas实现水流和水池动画的代码

利用Html 5的canvas标签绘制水流和水池动画

在利用HTML 5的canvas进行动画绘制之前，首先先介绍一下基本知识，包括canvas(如果对canvas比较熟悉的可以直接跳过该节)、oCanvas框架、精灵动画。在了解了以上的基本知识后，就可以开始利用canvas做动画了。

canvas标签简介

在这部分，东西比较多，比较杂，各个网站上都可以找到相关的简介，在此我就不造轮子了，菜鸟上的教程就挺不错的，另外推荐一个相当好的博文玩转html 5 canvas画图,这篇文章介绍的非常详细，推荐好好看看。

canvas框架oCanvas简介

canvas标签功能非常强大，既可以处理图片，又可以进行像素级的处理，完全可以取代浏览器端的flash，但是由于canvas发展还未完善，API还不是太全，元素的事件处理功能等还没有提供接口，在实现一些复杂功能时，尚需耗费许多精力，于是出现了许多第三方的基于canvas 的框架，这些框架相比于原生的canvas标签，有了更多简单易用的API，大大提高了我们编码的效率，在这里我选用的是oCanvas框架，相关的使用文档和demo都可以去上面的链接中查看。

精灵动画简介

精灵动画一般由一组自定义的属性值和3个子函数组成(init、advance、draw)。

三个函数的作用分别如下：

init：初始化精灵动画的属性值

advance：再画下一帧之前首先更新下一帧的状态值

draw：将advance函数中更新的状态值绘制到画布中

以上三个函数的执行顺序是：init->advance->draw->advance->draw->…..一直循环下去。下面我以一个随机产生上升气泡的例子说明一下上面的执行过程。var constructor_bubble = function (settings, core) {

return oCanvas.extend({

core: core,

shapeType: "rectangular",//下面定义了上面我们提到的三个函数：init(),advance(),draw()//在init中，我们map对象组、一个空的数组和一个代表高度的属性值

init: function () {

this.map=[

{r:2,speed:3},

{r:3,speed:3},

{r:4,speed:3},

{r:5,speed:3},

{r:6,speed:3},

{r:7,speed:3},

{r:8,speed:3},

{r:9,speed:3},

{r:10,speed:3}

]; this.points=[]; this.height=this.container.height_now;

},//下面是advance函数，在函数中我们利用if逻辑判断是否添加新的气泡以及进行气泡的位置更新，points数组利用队列的先进先出来存储气泡的

advance: function () {

this.height=this.container.height_now; if(Math.random()>0.95){ var new_point={

x:this.start.x+this.offset*2*(Math.random()-0.5),

y:this.start.y-this.map[0].r,

r:this.map[0].r

}; this.points.push(new_point);

} if(this.points.length>0){ for(var i=0;ithis.height-this.points[i].r-33){ this.points.shift();

}

}

}

},//draw函数中，利用canvas的圆弧绘制指令，将points数组中存储的气泡依次画出

draw: function () {

var canvas = this.core.canvas;

canvas.lineJoin = 'round';

canvas.lineWidth = this.GDwidth;

canvas.strokeStyle = "#fff"; if(this.points.length>0){ for(var i=0;i

canvas.beginPath();

canvas.arc(this.points[i].x,this.points[i].y,5,0,2*Math.PI);

canvas.stroke();

canvas.closePath();

}

}

}

}, settings);

};

oCanvas.registerDisplayObject("bubble", constructor_bubble, "init");//下面是在应用中定义和添加上面定义的精灵动画，其中：start数组代表了气泡的产生点，container代表了气泡的存在区域var pp1=canvas.display.bubble({

start:{x:425,y:566},

container:SC02,

width:50,

offset:1,

speed:5

}).add();

水流和水池动画实现

下面详细介绍一下，项目中如何实现水流动画和水池动画的详细步骤：

水池动画的绘制var constructor_show = function (settings, core) {

return oCanvas.extend({

core: core,

shapeType: "rectangular",//上面四行都是oCanvas框架的结构语法/*下面init()、advance()、draw()分别是上节中说的动画精灵三元素，第一个用来初始化，第二个用来

更新操作，第三个用来绘制图像/动画在管道对象中，定义了一些属性，包括：x、y、height、width、start、

height_now、full、speed、fill、trail_flag、[trail]。其中x、y分别代表水池参考点相对画布左

上角的位置，height、width是水池的宽高属性，start表征了动画是否开始，height_now代表了水池中水

位的高度，full表征了水池是否填满，speed水池上涨的速度，fill水的颜色，trail_flag表征了该水池

是否是一个标准的矩形，如果不是的话，配合trail属性，指定水池的轮廓*/

init: function () {

//默认动画关闭，水池full为0，当前高度为0

this.start=0; this.full=0; this.height_now=0;

},

advance: function () {

//如果水池未满并且是开启状态，水位未满就更新当前高度，否则将full置为1

if(this.start==1&&this.full!=1){ if (this.height_now < this.Height) { this.height_now += this.speed;

} else { this.full = 1;

}