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

面向对象: 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></pre><span style="font-size:18px"><br> 
<br> 
</span> 
<pre></pre> 
<span style="color:#330033"><span style="font-size:18px">构建好对象之后就可以构建对象了，
var mycar=new Car();</span></span> 
<p></p> 

<p><span style="font-family:monospace">
<span style="white-space:pre"><span style="color:#330033">
<span style="font-size:18px">setInterval()：这是javascript中的定时器函数，有两个参数，前面是待执行的代码，
后面一个是间隔时间。但是有几点需要注意的问题。</span>
</span>
</span>
</span>
</p> 
<p><span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">1：假设有一个函数GetPos()需要用定时器执行，
可以setInterval(GetPos,1000)或者setInterval("GetPos()",1000) 
如果写成setInterval(GetPos,1000)一般只会执行一次这个函数，我曾经犯过这个错误。</span>
</span>
</span>
</span>
</p> 
<p>
<span style="font-family:monospace"><span style="white-space:pre">
<span style="color:#330033"><span style="font-size:18px">
2：在setInterval()中尽量使用全局变量，因为它重复调用，局部变量容易出错。
</span>
</span>
</span>
</span>
</p> 
<p><span style="font-family:monospace">
<span style="white-space:pre">
<span style="font-size:18px">
<span style="color:#330033">
</span>
</span>
</span>
</span>
</p> 
<p>
<span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">
<img src="http://hi.csdn.net/attachment/201202/21/0_1329819126AX31.gif" align="middle" alt="">
</span>
</span>
</span>
</span>
</p> 
<p>
<span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">好了，罗嗦了一会儿，我想大家应该都知道这些的。</span>
</span></span></span></p> 
<p><span style="font-family:monospace">
<span style="white-space:pre">
<span style="color:#330033">
<span style="font-size:18px">这个gif图片中包括了星星对象和文字（后面讲述）对象。
对于绘制星星，应该充分利用五角星的对称性。
在<a href="http://lib.csdn.net/base/html5" 
class="replace_word" title="HTML5知识库" target="_blank" style="color:#df3434; 
font-weight:bold;">HTML5</a> 
canvas对象中，大家最好要灵活使用坐标变换，我把主要的坐标变换函数说一下：
</span>
</span>
</span>
</span
</p> 
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px"><span style="color:#330033"></span></span></span></span></p> 
<pre name="code" class="javascript"><span style="color:#ff0000;">
<span style="font-size:18px;">save() //保存当前画布状态 
restore()回复画布状态 
translate(x,y) //将画布中心坐标平移至x,y 
rotate(angle) //将画布旋转angle角度 
transform 和setTransform是对画布矩形进行变换的，比较难用</span></span></pre>
<span style="font-size:18px"> 现在构建星星对象，星星在天空中需要哪些属性呢？ 
一般有坐标、亮度、大小、倾斜角度等，我定义的如下</span> 
<p></p> 
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre"></span></span></span></p> 
<pre name="code" class="javascript"><span style="font-size:18px;"> this.x = -1; 
 this.y = -1; //表示横纵坐标 
 this.style = ""; 
 this.r = -1; 
 this.scale = 1; //表示缩放倍数 
 this.angle = 0; //旋转的角度 
 this.angle1 = 0; //辅助参数</span>
 </pre>
 <span style="font-size:18px"><br> 
其次需要绘制星星的方法，前面说过需要利用星星的对称性，因此实际上只需要绘制五分之一，
再利用旋转就可以绘制全部的图形了。星星需要填充颜色，HTML5中可以对路径进行填充，
因此可以使用路径beginPath()和closePath(),但是最后记住使用fill()函数填充的。</span> 
<p></p> 

<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">例如我绘制五分之一图形函数：</span>
</span>
</span></p> 
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre"></span></span></span></p> 
<pre name="code" class="javascript">
<span style="font-size:18px;"> this.drawPartStar = function () //部分 
 { 
 cxt.save(); 
 cxt.beginPath(); 
 cxt.lineCap = "round"; cxt.lineWidth = 5; 
 cxt.fillStyle = this.style; 
 cxt.translate(this.x, this.y); //位移 
 cxt.rotate(this.angle1); 
 //cxt.globalAlpha = this.alpha; //设置透明度 
 cxt.moveTo(0, 0); 
 var xx = 0 - this.r * Math.sin(36 / 180 * 3.14); 
 var yy = 0 - this.r * Math.cos(36 / 180 * 3.14); 
 cxt.lineTo(xx, yy); 
 xx = 0; 
 yy = 0 - this.r * Math.cos(36 / 180 * 3.14) 
 - this.r * Math.sin(36 / 180 * 3.14) * Math.tan(72 / 180 * 3.14); 
 cxt.lineTo(xx, yy); 
 xx = this.r * Math.sin(36 / 180 * 3.14); 
 yy = 0 - this.r * Math.cos(36 / 180 * 3.14); 
 cxt.lineTo(xx, yy); 
 cxt.lineTo(0, 0); 
 cxt.closePath(); 
 cxt.fill(); 
 cxt.restore(); 
 }</span></pre><span style="font-size:18px"><br> 
然后利用画布旋转就可以得到整个的图形了</span> 
<p></p> 
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre">
</span></span></span></p> 
<pre name="code" class="javascript">
<span style="font-size:18px;">this.drawStar = function () //绘制完整的花 
 { 
 for (var i = 0; i <= 4; i++) { 
 this.angle1 = i * 72 / 180 * 3.14 + this.angle; 
 this.drawPartStar(); 
 } 
 }</span></pre><span style="font-size:18px"><br> 
关于星星的坐标，半径大小，倾斜角度都可以使用随机函数实现，利用实现m到n之间的随机数：</span> 
<p></p> 
<p><span style="font-family:monospace"><span style="font-size:18px">
<span style="white-space:pre"></span></span>
</span></p> 
<pre name="code" class="javascript"><span style="font-size:18px;">var x=(n-m)*Math.random()+m;</span>
</pre><span style="font-size:18px"><br> 
通过合理控制m,n就可以得到需要的值了。</span> 
<p></p> 
<p><span style="font-family:monospace"><span style="font-size:18px"><span style="white-space:pre">
</span></span></span></p> 
<p><span style="font-family:monospace"><span style="white-space:pre"><span style="font-size:18px"><br> 
</span></span></span></p> 
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">好了，到这里星星对象创建过程结束，其次需要构建这些星星。 
由于星星数目多，可以使用数组对象，每一个数组对象都是一个星星对象：</span></span></span></p> 
<p><span style="font-family:monospace"><span style="font-size:18px"><span style="white-space:pre">
</span></span></span></p> 
<pre name="code" class="javascript">
<span style="font-size:18px;"> 
var stars = new Array(); //创建星星对象 
 var starCount = 40; //星星的数目,默认是40 
 
for (var m = 0; m < starCount; m++) // 
 { 
 var s = new star(cxt); 
 s.init();stars[m] = s; 
 }</span></pre><span style="font-size:18px"><br> 
最后使用定时器，使星星具有闪烁效果：</span> 
<p></p> 
<p><span style="font-family:monospace">
<span style="font-size:18px">
<span style="white-space:pre">
</span>
</span></span></p> 
<pre name="code" class="javascript">
<span style="font-size:18px;"> 
/***************演示闪烁星星的函数**********************/ 
 function playStars() //演示星星 
 { 
 for (var n = 0; n < starCount; n++) 
 { 
 stars[n].getColor(); 
 stars[n].drawStar(); 
 } 
 }</span></pre><span style="font-size:18px"> setInterval("playStars()",500);</span> 
<p></p> 
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">这样，闪烁的星星就全部做完了。</span></span></span></p> 
<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">