HTML5應用-生日快樂動畫之實現(xiàn)星星的示例代碼分享

面向對象: javascript本質上不是面向對象語言，而是腳本語言，一般只適合簡單、代碼量少的程序，因為腳本過于復雜會直接導致瀏覽器出現(xiàn)異常。 但是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中的定時器函數(shù)，有兩個參數(shù)，前面是待執(zhí)行的代碼，
后面一個是間隔時間。但是有幾點需要注意的問題。</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：假設有一個函數(shù)GetPos()需要用定時器執(zhí)行，
可以setInterval(GetPos,1000)或者setInterval("GetPos()",1000) 
如果寫成setInterval(GetPos,1000)一般只會執(zhí)行一次這個函數(shù)，我曾經(jīng)犯過這個錯誤。</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對象中，大家最好要靈活使用坐標變換，我把主要的坐標變換函數(shù)說一下：
</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() //保存當前畫布狀態(tài) 
restore()回復畫布狀態(tài) 
translate(x,y) //將畫布中心坐標平移至x,y 
rotate(angle) //將畫布旋轉angle角度 
transform 和setTransform是對畫布矩形進行變換的，比較難用</span></span></pre>
<span style="font-size:18px"> 現(xià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;"> this.x = -1; 
 this.y = -1; //表示橫縱坐標 
 this.style = ""; 
 this.r = -1; 
 this.scale = 1; //表示縮放倍數(shù) 
 this.angle = 0; //旋轉的角度 
 this.angle1 = 0; //輔助參數(shù)</span>
 </pre>
 <span style="font-size:18px"><br> 
其次需要繪制星星的方法，前面說過需要利用星星的對稱性，因此實際上只需要繪制五分之一，
再利用旋轉就可以繪制全部的圖形了。星星需要填充顏色，HTML5中可以對路徑進行填充，
因此可以使用路徑beginPath()和closePath(),但是最后記住使用fill()函數(shù)填充的。</span> 
<p></p> 

<p><span style="font-family:monospace"><span style="white-space:pre">
<span style="font-size:18px">例如我繪制五分之一圖形函數(shù)：</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> 
關于星星的坐標，半徑大小，傾斜角度都可以使用隨機函數(shù)實現(xiàn)，利用實現(xiàn)m到n之間的隨機數(shù)：</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">好了，到這里星星對象創(chuàng)建過程結束，其次需要構建這些星星。 
由于星星數(shù)目多，可以使用數(shù)組對象，每一個數(shù)組對象都是一個星星對象：</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(); //創(chuàng)建星星對象 
 var starCount = 40; //星星的數(shù)目,默認是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;"> 
/***************演示閃爍星星的函數(shù)**********************/ 
 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">
聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com