Html5遊戲開發-圖形與動畫（一）

標籤：aliyun   tail   內容   alt   ram   article   它的   滾動   java   

最近研究了一下出來了很久的HTML5，總結了一下，準備來個系列，文中也許有很多問題，歡迎大家指正。

Canvas介紹

canvas用於在網頁中繪製圖形的一個元素，具體內容請查看 -> HTML5 Canvas

這裡說些w3school中沒有的。

立即模式

canvas元素是立即模式的圖形系統，意味著當你提出要求時，他會立即繪製，然後立即忘記（繪製完成一個對象，就會銷毀這個對象）。其它的圖形系統（例如：SVG），使用了保留模式的圖形系統，就是說繪製時他們會保留一系列將要繪製的對象。正因未Canvas不需要維護這一系列對象，所以Canvas的運行速度要快很多。

雙緩衝機制

在上面，我們提到了立即模式，但這裡的“立即繪製”並不是大家所謂的立即，此處需要進一步說明。

在瀏覽器調用我們定義的繪製方法（假設這個方法是DrawGame）繪製當前動畫幀時，Canvas元素並不是立即繪製出你指定的內容。相反，它會建立另一個Canvas元素（我們叫它Canvas2），所有的繪製實際上都在Canvas2中進行。當DrawGame方法返回時，瀏覽器會通過一個圖形操作，複製Canvas2內容到螢幕上，我們將這種技術稱為雙緩衝技術，雙緩衝技術讓動畫的實現變得平滑。

座標系統（translate）

translate(x,y)這是Canvas元素的一個方法，遊戲的背景移動，大多通過該方法來實現。遊戲中，我們不會通過頻繁對大量元素進行座標計算來實現對象的滾動，因為這樣的計算不僅消耗電腦效能，還增加了代碼的維護難度。

注意：為了不影響後續的繪製，在使用translate(x,y)修改座標系統後，需要再次調用translate(-x,-y)來恢複座標系統。

具體內容請查看 -> HTML5 canvas translate()

建立Canvas鏡像和恢複Canvas

在進行動畫繪製時，我們會經常的對Canvas元素的繪圖環境（context）進行修改，例如strokeStyle，lineWidth等。這些修改操作都是永久的，也就意味著對他們的修改將會影響接下來任何你在Canvas元素的圖形操作。那麼如何讓這些操作只是臨時有效呢？這裡我們可以使用save()和restore()方法對當前Canvas元素的繪圖環境狀態建立鏡像和恢複。任何寫在這兩個方法間的環境屬性修改，在執行restore後，都會恢複成save時的狀態。

注意：save()和restore()需要成對出現，也就是有save，就要有restore。

 

實現平滑的HTML5動畫

所謂的動畫，說白了就是一張一張的圖片不斷的連續更換。所以，通過編程實現動畫也就是不斷的通過替換圖片，來達到動畫的效果。

但是，這種不斷地替換，當然不能使用死迴圈while(true)來實現，傳統的方法是使用setTimeout()和setInterval()方法，這兩個方法雖然都提供了毫秒級的精確度，但實際上，卻達不到毫秒級（參考此處：setTimeout精度測試、setInterval精度測試）。所以為了保證動畫的平滑度，我們不應該繼續使用setTimeout和setInterval方法來實現對時間有著苛刻要求的動畫，用什麼來代替？我們在下一節講到。

requestAnimationFrame()方法

在w3c中的Timing Control for Script-based Animations（參考此處 -> w3c-Script-based Animations）說明中，定義了一個requestAnimationFrame()視窗對象的方法。不同於setTimeout和setInterval方法，requestAnimationFrame是專門用來實現動畫的，它使用瀏覽器的時間間隔進行繪製，不會掉幀。

這裡需要注意的是，requestAnimationFrame方法在表單沒啟用或者頁簽不可見的時候，動畫會暫停。

下面是盜的圖，支援requestAnimationFrame方法的瀏覽器及版本（來源：HTML5 requestAnimationFrame( ) 動畫API）

javascript執行個體：

1 function animate(now)2 {3     DrawGame(now);4     requestAnimationFrame(animate);5 }6 ...7 requestAnimationFrame(animate);

 製作基於時間的運動

遊戲畫面播放速率是不穩定的，也許此時能夠60幀/秒，下一刻也許就成了10幀/秒。遊戲幀的速率是變化的，我們不能讓遊戲幀的速率影像到遊戲中物體運動的速率，例如：人物的運動，背景的滾動，子彈的速度等等。所以，遊戲中物體的運動必須是基於時間的，並且僅僅依賴於時間（例如：像素/秒），而不是動畫畫面播放速率。

在上一節的執行個體中，我們可以發現animate有個參數是now，它代表當前繪製的時間，既然有了這個參數，我們就能知道兩次時間間隔，從而計算出運動的距離。

javascript執行個體：

1 var speed = 50;2 var lastAnimationTime = new Date();3 var offsetX = 0;4 function SetBackgroundOffsetX(now)5 {6     offsetX += speed * (now - lastAnimationTime)/10007     ...8     //如果一直加下去，背景會慢慢移出螢幕，下面的代碼自己寫吧9 }

 

結尾

到這裡，關於圖形與動畫的內容就差不多結束了，內容不多，代碼很少，但是我覺得已經夠了，畢竟大部分的基礎知識都能在網上找到哈哈。

本人不是HTML5大佬，如文中有問題，請大家幫忙指正，謝謝大家~

Html5遊戲開發-圖形與動畫（一）