一、為什么選擇 HTML5

　　HTML5 邊玩邊學(xué)算上這篇已經(jīng)是第七篇了，在這篇開(kāi)始之前，我想先說(shuō)明一下為什么叫“HTML5”邊玩邊學(xué)，因?yàn)橛腥藢?duì) HTML5 提出質(zhì)疑，畢竟他是一個(gè)新生事物。我承認(rèn)我用 HTML5 來(lái)吸引眼球了，如果看過(guò)邊玩邊學(xué)系列的每一篇，你會(huì)發(fā)現(xiàn)前六篇文章內(nèi)容的和 HTML5 關(guān)系不是太大，真正的內(nèi)容其實(shí)是 2D 圖形圖像編程的學(xué)習(xí)筆記。

　　如果我們想學(xué)習(xí) 2D 編程，其實(shí)可供選擇的編程環(huán)境數(shù)不勝數(shù)：MFC、Delphi都有圖形圖像處理功能(即GDI),Java、.NET 更不用說(shuō)了，如果你支持開(kāi)源，GTK、QT、wxPython 也是不錯(cuò)的選擇，F(xiàn)lash 更是拿手好戲，甚至幾個(gè)流行的只能手機(jī)平臺(tái)應(yīng)該也有 2D 模塊。

　　如果你選擇了上面任何一款編程環(huán)境學(xué)習(xí) 2D 編程，你會(huì)發(fā)現(xiàn)他們的內(nèi)容基本上是一樣的：線型、填充、顏色、漸變、圖像、組合、裁剪區(qū)、變形等等，甚至連函數(shù)名很多都是一摸一樣，畢竟他們的理論基礎(chǔ)都是圖形學(xué)。

　　搞清楚我們真正想學(xué)習(xí)什么以后，其實(shí)編程環(huán)境只是個(gè)工具而已，我們根據(jù)個(gè)人喜好，選擇最方便的一款來(lái)使用。其實(shí)我更青睞 Python 編程環(huán)境，只是如果我用了Python，估計(jì)跟我交流的人就不會(huì)太多了，大家機(jī)器里安裝 Python 運(yùn)行時(shí)的估計(jì)不會(huì)太多。

　　那么為什么選擇 HTML5 而不是其他呢？首先，Javascript 語(yǔ)法簡(jiǎn)潔靈活，相應(yīng)的函數(shù)庫(kù)小巧但是夠用， HTML5 Canvas 標(biāo)簽的 2D 表現(xiàn)能力也達(dá)到了要求，Chrome 瀏覽器的運(yùn)行速度讓人滿意。除此之外，我們不用安裝笨重的集成開(kāi)發(fā)環(huán)境，不需要安裝運(yùn)行時(shí)，我們只需要一個(gè)加強(qiáng)功能的記事本、一個(gè)瀏覽器就可以去實(shí)踐我們的想法，并且直接將效果呈現(xiàn)在網(wǎng)絡(luò)上。我們只是發(fā)表文章同其他人分享自己的想法而已，至于平臺(tái)、框架、語(yǔ)言特性，這些無(wú)關(guān)的東西當(dāng)然牽扯的越少越好，這就是我選擇 HTML5 的原因。

　　所以，請(qǐng)大家不要誤解了標(biāo)題的含義：這個(gè)系列并不是 HTML5 的學(xué)習(xí)筆記，而只是用 HTML5 來(lái)展現(xiàn)一些知識(shí)內(nèi)容而已，你更多關(guān)注的應(yīng)該是知識(shí)和內(nèi)容本身，你可以在任何其他一款編程環(huán)境下再現(xiàn)他們。

　　二、動(dòng)畫(huà)初步

　　動(dòng)畫(huà)就是一系列連續(xù)的畫(huà)面按順序呈現(xiàn)出來(lái)而已，只是，在電影電視中，這些畫(huà)面實(shí)現(xiàn)已經(jīng)被準(zhǔn)備好了，而在電腦程序中，我們見(jiàn)到每一瞬間的畫(huà)面都是即時(shí)繪制的，大體流程可以表述如下：

　　a、輕微改變圖形的數(shù)據(jù)（坐標(biāo)、形狀、顏色等等）

　　b、清空畫(huà)布

　　c、繪制圖形

　　d、回到步驟 a

　　當(dāng)然，這里只是給出了一個(gè)最簡(jiǎn)單的流程框架，要實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)可能還要考慮更多的問(wèn)題，比如局部清除、碰撞檢測(cè)之類(lèi)的。

　　另外，繪制過(guò)程中有兩個(gè)速度需要控制：

　　第一個(gè)是繪制速度，即每秒鐘繪制多少次（幀），或者也可以這樣說(shuō)，每一幀暫停多少時(shí)間。如果你的動(dòng)畫(huà)每一幀都是一個(gè)樣子，只是位置不同，這個(gè)速度影響不大。

　　第二個(gè)圖形移動(dòng)的速度。

　　所以，千萬(wàn)不要把這兩個(gè)速度搞混了，繪制的越快，只能代表動(dòng)畫(huà)更流暢，但并不代表你的圖像移動(dòng)的更快。

　　使用 HTML5 繪制動(dòng)畫(huà)基本上就是上面這個(gè)流程，只是你還需要注意兩點(diǎn)：

　　1、為了方便繪制的圖形，我們經(jīng)常會(huì)改變上下文對(duì)象的的狀態(tài)，所以在繪制圖形前后，千萬(wàn)別忘了保存和恢復(fù)狀態(tài)，如果你不太了解狀態(tài)是什么，請(qǐng)看前面的一篇文章《HTML5邊玩邊學(xué)（6）：汽車(chē)人，變形......》

　　2、我們需要將整個(gè)繪制動(dòng)作放到定時(shí)器里面，否則整個(gè)瀏覽器將失去響應(yīng)。Javascript 有兩個(gè)定時(shí)器方法，分別是：

　　setInterval(code,millisec) 和 setTimeout(code,millisec)

　　這兩個(gè)方法我就介紹了，可以去 Google 相關(guān)的資料。

　　下面我們給出一個(gè)上下移動(dòng)方塊的小動(dòng)畫(huà)，當(dāng)遇到頂部或者底部時(shí)，會(huì)改變方向。代碼如下：

<canvas id="canvas1" width="250" height="300" style="background-color:black">
    你的瀏覽器不支持 Canvas 標(biāo)簽，請(qǐng)使用 Chrome 瀏覽器 或者 FireFox 瀏覽器
</canvas><br/>
幀數(shù)：<input  id="txt1" type="text" value="25"/><br/>
每次移動(dòng)距離：<input type="text" id="txt2" value="10"/><br/>
<input type="button" value="開(kāi)始" onclick="move_box()"/>
<input type="button" value="暫停" onclick="stop()"/>

<script type="text/Javascript">
    //定時(shí)器
    var interval=null;
    
    //停止動(dòng)畫(huà)
    function stop(){
        clearInterval(interval);
    }

    //===================================================================
    //基本動(dòng)畫(huà)
    //====================================================================
    function move_box(){
        //停止動(dòng)畫(huà)
        stop();
        //移動(dòng)速度
        var delta=parseInt(document.getElementById('txt1').value);
        //每秒繪制多少次
        var fps=parseInt(document.getElementById('txt2').value);

        //畫(huà)布對(duì)象
        var canvas=document.getElementById("canvas1")
        //獲取上下文對(duì)象
        var ctx = canvas.getContext("2d");
        //設(shè)置顏色
        ctx.fillStyle="red";
        
        //方塊的初始位置
        var x=100;var y=50;
        //方塊的長(zhǎng)度和寬度
        var w=30;var h=30;
        
        //開(kāi)始動(dòng)畫(huà)
        interval = setInterval(function(){
            //改變 y 坐標(biāo)
            y=y+delta;
            //上邊緣檢測(cè)
            if(y<0){
                y=0;
                delta=-delta;
            }
            //下邊緣檢測(cè)
            if((y+h)>canvas.getAttribute("height")){
                y=canvas.getAttribute("height")-h;
                delta=-delta;
            } 
            //清空畫(huà)布
            ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height"));
            //保存狀態(tài)
            ctx.save();
            //移動(dòng)坐標(biāo)
            ctx.translate(x,y);
            //重新繪制
            ctx.fillRect(0,0,w,h);
            //恢復(fù)狀態(tài)
            ctx.restore();
        },1000/fps);
    }    
</script>        

        

        
        
      
        
it知識(shí)庫(kù)：HTML5邊玩邊學(xué)（7）：動(dòng)畫(huà)初步 之 飛舞的精靈，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。