开源夏令营之项目汇报6（中期报告）

2014年8月2日，周六

项目：腾讯开源   html5光影粒子引擎

导师：何骏

学生：董宁

写这个中期报告之前呢，先说明一件事，从7月9号接到项目到现在，一直在学习，跟进这个项目，

所以断断续续的往code上传了一些未成品，

可今天上传成品的时候因为不成功，就强制了一下，结果导致以前的都自动没有了，

咨询了一下CSDN-code的工作人员，她说这个是不要紧的，

所以请导师以及各位评审在中期检查时看到我code上的时候不要误会我以前没有传过。

因为强制上传，所以目前code上只有最终完成的项目，不过之前的未成品在本地还都是有保存的。

好了，接下来进入正题，项目中期报告！

2014年7月9日接到项目，到今天，大概三周的时间吧，

我要独自去完成这个项目的前期，即：4个粒子特效。

老实说，一开始不认为自己会被选中，因为有很多名牌大学的参赛，

所以拿到通知的时候很激动，也很诧异。

何骏导师第一次给我打电话的时候，我就问了他为什么没选那些名牌大学的，

他的回答让我到现在都还是很感动的，他说，我不看中大学，我看中的是态度！

我的编程基础还是比较差的，算是从头开始学习canvas，

但是为了何骏老师那句话，我一直坚持到了现在。

我记得第一次项目汇报写的是关于粒子和canvas的，

那次报告让我了解了什么是粒子和canvas，

第二次报告写的是canvas的简单应用，

第三次写的是一个基于canvas的简单粒子特效，

第四次写的是这段时间以来遇到的困难，

导师是比较忙的，所以遇到的很多问题，都得我自己想办法去解决，

第五次报告是在上周，项目基本成型的时候写的，主要描绘了项目主页index和整个的项目结构。

4个demo，也就是4个html，我用了一个新的html——index去做主页，

在index上就能分别调用到每个demo，

这个很简单，只需要div好<.a href>就ok了，

然后link一个外部css对其美化，

因为感觉主页比较单调，所以额外加了一张大背景和一个script的实时时间效果

最开始的时候是只有4个html的，也就是4个demo，css和js嵌在里面，

可是最后发现那样是不利于封装的，很乱，

中期的时候，做成了4个html，1个js，每个html都调用这个js，

这样会产生一些冲突，也就是我项目汇报4中写到的。

所以最后4个html分别分出了4个js和4个css，

每个html都去调用自己的css和js，

index也会有自己的css和js，也去单独调用自己的，

这样，封装的时候很清晰！

最后的时候我给每个html都配上自己的ico，

虽然是个很小的事，

但我觉得我们一定要去注重细节！还有就是美感！

实现很简单， <link rel="shortcut icon" href="../ico/index.ico">

整体框架说完了，

下面我单独举例说一个粒子特效，

以html5光影粒子闪光特效为例，

我们在写一个页面的时候，

打好基本框架，

无非就是新标签的引用，例如<.canvas>

还有css层叠样式表，javascript，body，div等，

做粒子特效，css的要求很简单，对于闪光特效，

css就这一句：*{margin:0;padding:0;}

难点是javascript，所以我们先说一下html主体

主体很简单，就是css外部调用，ico调用，canvas画布标签定义和script的函数调用。

然后难点就是如何利用javascript在canvas上绘制我们想要的特效！

闪光特效，我们可以这么理解，就是一个有生命会发光的球，在它的生命周期内不断生成新的有生命会发光的球，并且颜色不断变化，

颜色的不断变化，其实就是颜色渐变加随机数的生成，

不断生成新的球，其实就是一个循环和一个数组，数组用来存放光球，

为了使网页打开就能看到特效，所以要window.οnlοad=function(){ }

然后定义变量，去获得canvas画布，获得屏幕分辨率，等等。

建议，做这个特效的时候，最好加上鼠标监听事件，

就是鼠标到哪，闪光特效到哪，不然特效只会孤零零在屏幕上不动，缺乏美感。

然后就是定义光球这个类，简单地说就是新建一个函数，然后this.=...

光球嘛，就是一个对象，这点跟java很像。

万事俱备，只欠东风，接下来我们需要去绘制光球，也就是来个draw函数。

要注意的是，光球是粒子，粒子是有生命周期的，所以在粒子消失以后要重新生成，

对于光球来说，半径和透明度就是它的生命周期，最开始生成一个较大的光球，

随着时间变化，半径减到0，达到完全透明，就是粒子的消亡，

这个时候要重新生成新的粒子才行。

最后要注意的是，我们绘制光球不可能只绘制一次，所以要不断调用这个函数，别忘了补上这句setInterval(draw,40);和一个｝

以上是粒子闪光特效，对于爆炸，烟雾，文字特效也都是大同小异的，

大概都是简单定义css，

html主体调用canvas和js函数，

js函数里获得canvas画布，屏幕分辨率，

定义存放的数组，循环和对应的类，

难点就是绘制的这个draw函数，

要注意循环和随机数的使用，

然后不断刷新这个函数，基本就ok啦。

其实这三周的时间，从canvas初学到现在还是很不容易的，

我遇到过很多奇葩的问题，

比如：编译完全不报错，但是运行没结果，什么都没有。

那时会感觉，写了那么多，什么也没有！！！还找不到错误！！！！

但咬咬牙还是坚持下来了，也终于有了今天的收获。

所以无论我们做什么事，不管事情大小，我们都要细心和坚持，还要有足够的耐心！

这样，就算最后的结果不成功，我们也会有不小的收获。

我觉得，人生嘛，就是不断的去经历，去尝试。

后天就是中期检查了，不管能不能通过，我都要感谢何骏老师给了我这次难得的机会，

因为独立担起一个项目，我真的学到了很多，不仅仅是canvas和粒子，还有很多很多难以言喻的东西。