HTML5应用-生日快乐动画之实现星星的示例代码分享

              在讲述绘制星星动画之前，先介绍一点javascript知识。

             面向对象: javascript本质上不是面向对象语言，而是脚本语言，一般只适合简单、代码量少的程序，因为脚本过于复杂会直接导致浏览器出现异常。 但是javascript还是具有面向对象的特点的。对于多过程、多对象的脚本程序还是建议构建对象，这样对于脚本的维护、修改和调用都是很方便的。javascript构造对象很简单，比起java、c++简单很多， 例如构建一辆汽车的对象:

<pre name="code" class="javascript"><span style="font-size:18px;">var Car=function()//构建车的对象  {     this.color="red";          this.price=100000;          this.length=2.5;          this.speed=80;   //车的一些属性          this.x=0;          this.updatePos=function()  //更新车位置的方法          {    this.x+=this.speed;          }  }  </span>

立即学习“前端免费学习笔记（深入）”；

setInterval()：这是javascript中的定时器函数，有两个参数，前面是待执行的代码，后面一个是间隔时间。但是有几点需要注意的问题。

1：假设有一个函数GetPos()需要用定时器执行，可以setInterval(GetPos,1000)或者setInterval("GetPos()",1000) 如果写成setInterval(GetPos,1000)一般只会执行一次这个函数，我曾经犯过这个错误。

2：在setInterval()中尽量使用全局变量，因为它重复调用，局部变量容易出错。

好了，罗嗦了一会儿，我想大家应该都知道这些的。

这个gif图片中包括了星星对象和文字（后面讲述）对象。对于绘制星星，应该充分利用五角星的对称性。在HTML5 canvas对象中，大家最好要灵活使用坐标变换，我把主要的坐标变换函数说一下：