一、為什么選擇 HTML5

　　HTML5 邊玩邊學算上這篇已經是第七篇了，在這篇開始之前，我想先說明一下為什么叫“HTML5”邊玩邊學，因為有人對 HTML5 提出質疑，畢竟他是一個新生事物。我承認我用 HTML5 來吸引眼球了，如果看過邊玩邊學系列的每一篇，你會發現前六篇文章內容的和 HTML5 關系不是太大，真正的內容其實是 2D 圖形圖像編程的學習筆記。

　　如果我們想學習 2D 編程，其實可供選擇的編程環境數不勝數：MFC、Delphi都有圖形圖像處理功能(即GDI),Java、.NET 更不用說了，如果你支持開源，GTK、QT、wxPython 也是不錯的選擇，Flash 更是拿手好戲，甚至幾個流行的只能手機平臺應該也有 2D 模塊。

　　如果你選擇了上面任何一款編程環境學習 2D 編程，你會發現他們的內容基本上是一樣的：線型、填充、顏色、漸變、圖像、組合、裁剪區、變形等等，甚至連函數名很多都是一摸一樣，畢竟他們的理論基礎都是圖形學。

　　搞清楚我們真正想學習什么以后，其實編程環境只是個工具而已，我們根據個人喜好，選擇最方便的一款來使用。其實我更青睞 Python 編程環境，只是如果我用了Python，估計跟我交流的人就不會太多了，大家機器里安裝 Python 運行時的估計不會太多。

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

　　所以，請大家不要誤解了標題的含義：這個系列并不是 HTML5 的學習筆記，而只是用 HTML5 來展現一些知識內容而已，你更多關注的應該是知識和內容本身，你可以在任何其他一款編程環境下再現他們。

　　二、動畫初步

　　動畫就是一系列連續的畫面按順序呈現出來而已，只是，在電影電視中，這些畫面實現已經被準備好了，而在電腦程序中，我們見到每一瞬間的畫面都是即時繪制的，大體流程可以表述如下：

　　a、輕微改變圖形的數據（坐標、形狀、顏色等等）

　　b、清空畫布

　　c、繪制圖形

　　d、回到步驟 a

　　當然，這里只是給出了一個最簡單的流程框架，要實現復雜的動畫可能還要考慮更多的問題，比如局部清除、碰撞檢測之類的。

　　另外，繪制過程中有兩個速度需要控制：

　　第一個是繪制速度，即每秒鐘繪制多少次（幀），或者也可以這樣說，每一幀暫停多少時間。如果你的動畫每一幀都是一個樣子，只是位置不同，這個速度影響不大。

　　第二個圖形移動的速度。

　　所以，千萬不要把這兩個速度搞混了，繪制的越快，只能代表動畫更流暢，但并不代表你的圖像移動的更快。

　　使用 HTML5 繪制動畫基本上就是上面這個流程，只是你還需要注意兩點：

　　1、為了方便繪制的圖形，我們經常會改變上下文對象的的狀態，所以在繪制圖形前后，千萬別忘了保存和恢復狀態，如果你不太了解狀態是什么，請看前面的一篇文章《HTML5邊玩邊學（6）：汽車人，變形......》

　　2、我們需要將整個繪制動作放到定時器里面，否則整個瀏覽器將失去響應。Javascript 有兩個定時器方法，分別是：

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

　　這兩個方法我就介紹了，可以去 Google 相關的資料。

　　下面我們給出一個上下移動方塊的小動畫，當遇到頂部或者底部時，會改變方向。代碼如下：

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

<script type="text/Javascript">
    //定時器
    var interval=null;
    
    //停止動畫
    function stop(){
        clearInterval(interval);
    }

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

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

        

        
        
      
        
it知識庫：HTML5邊玩邊學（7）：動畫初步 之 飛舞的精靈，轉載需保留來源！
        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。