在HTML5中，利用函数可以让我们减轻很多工作量，但如果利用不当那就会使得其反了。那么我们要怎样合理的去利用函数呢?今天的HTML5教程就给大家讲讲函数分离的作用。
　　函数分离指的是把函数和HTML5文件分离，放在一个单独的java script(.js)文件里。这样做一个是方便整理维护，另外还能让多个html文件访问同一个函数，是不是很好用。
　　下面我们实作一个HTML5教程，来体会下这种代码分离的好处。
　　我们想画两根吸管，从吸管里不断滴出不同颜色的染料，在吸管的下方有一只碟子，染料落到碟底会发生混合，并逐渐蔓延到整个碟底，如果要这样的话，我们要做这样几件事情：
　　1)画两根吸管;
　　2)画一个碟子;
　　3)画两滴液滴;
　　4)计算混合后的颜色;
　　5)使用混合色蔓延到整个碟底。
　　6)为了避免背景残留，我们还需要不断重绘液滴和碟子。
　　具体实现如下：
　　1)新建一个文件，取名：“mixLiquidDrops.js” (文件名任意，方便记忆即可)
　　2)在mixLiquidDrops.js文件中实现5个函数：
　　2.1)function drawEllipse(context, x, y, a, b, fillingColor)， 这个函数用于画碟边，碟底和混合后的染料蔓延开来的形状。
　　2.2)function drawLiquid(context, x0, y0, r, fillingColor)， 顾名思义，这是画液滴用的。
　　2.3)function drawAPen(context, x0, y0)， 这个名字没取好，实际上是画那两根吸管用的。
　　2.4)function getRandomColor()，这是用来生成随机色的。
　　2.5)function mixLight( color1, color2 )， 这是用来计算混合色的。
　　好了，我们在HTML5全栈开发文件里做如下事情：
　　1)引用java script文件
　　2)监听"load"事件，在"load"事件里我们做这几件事：
　　2.1)画两根吸管;
　　2.2)生成随机色，为描画液滴做准备;
　　2.3)生成计时器，用于画面刷新;
　　3)在HTML5教程里计时间隔里不断重绘画面，执行以下动作：
　　3.1)清屏;
　　3.2)画碟子;
　　3.3)画液滴;
　　3.4)画渲染的混合色。
　　这样我们的操作就可以很简单的完成了，是不是比正常的操作省了很多时间呢？