WEB前端培訓之David Geary對HTML5 的 2D 視頻游戲詳細剖析思路二

 1、使用drawRunner()函數(shù)把跑步者給繪制出來
 

 分析：其實drawRunner函數(shù)中主要是將三個參數(shù)（一個圖像、左側坐標和頂部坐標）向drawImage()傳遞，其中頂部坐標由跑步者所駐留的平臺決定，而左側坐標則是一個常數(shù)。

          2、通過drawBackground（）背景函數(shù)繪制背景，drawPlatforms()函數(shù)繪制平臺


  分析：drawBackground() 函數(shù)在畫布的 (0,0) 繪制背景圖像。稍后，我會在本文中修改該函數(shù)，以便滾動背景。而繪制平臺（它們不是圖像）需要更廣泛地使用 Canvas API。多用途的 drawImage() 方法您可以使用 Canvas 2D 上下文的 drawImage() 方法在畫布內(nèi)的任何地方繪制一個完整的圖像，或圖像內(nèi)的任何矩形區(qū)域，有選擇地沿著路線縮放圖像。除了圖像外，您還可以利用 drawImage() 繪制另一個畫布或一個 video 元素當前幀的內(nèi)容。這只是其中一個方法，但 drawImage() 還有助于便利地實現(xiàn)有趣的或者難以實現(xiàn)的應用程序（如視頻編輯軟件）。

         其中的 JavaScript 定義一個名稱為 platformData 的數(shù)組。該數(shù)組中的每個對象代表著描述一個獨立平臺的元數(shù)據(jù)。drawPlatforms() 函數(shù)使用 Canvas 上下文的 strokeRect() 和 fillRect() 方法來繪制平臺矩形。這些矩形的特征存儲在 platformData 數(shù)組內(nèi)的對象中，用于設置上下文的填充風格和 globalAlpha 屬性，該屬性設置您之后在畫布上繪制的任何圖形的不透明度。調(diào)用 context.translate() 將畫布的坐標系（如圖 2 所示）在水平方向平移指定數(shù)量的像素。該平移和屬性設置是臨時的，因為這些操作是在 context.save() 和 context.restore() 調(diào)用之間執(zhí)行的。

3、使用setInterval()和requestAnimationFrame()對動畫的實現(xiàn)

    分析：從許多方面來看，HTML5 是程序員的烏托邦。沒有專用的 API，開發(fā)人員使用 HTML5 在無處不在的瀏覽器中實現(xiàn)跨平臺運行的應用程序。規(guī)范發(fā)展迅速，不斷采用新技術，同時改進現(xiàn)有的功能。
           Polyfill：面向未來的編程過去，大多數(shù)跨平臺軟件都在最低的共同點實現(xiàn)。Polyfill 徹底顛覆了這一概念，它讓您能夠訪問高級特性（如果它們可用），并在必要時回退到一個能力較低的實現(xiàn)。

           然而，新技術要實行規(guī)范，往往是通過特定瀏覽器現(xiàn)有的功能來實現(xiàn)的。瀏覽器廠商通常為這樣的功能添加了前綴，使它們不會干擾其他瀏覽器的實現(xiàn)；例如，requestAnimationFrame() 最初被 Mozilla 實現(xiàn)為 mozRequestAnimationFrame()。然后 WebKit 實現(xiàn)了它，將其函數(shù)命名為 webkitRequestAnimationFrame()。最后，W3C 將它標準化為 requestAnimationFrame()。
          供應商提供了對前綴實現(xiàn)以及標準實現(xiàn)的不同支持，這使得新功能的使用變得非常棘手，所以 HTML5 社區(qū)發(fā)明了一種被稱為 polyfill 的東西。Polyfill 針對特定功性確定瀏覽器的支持級別，如果瀏覽器已經(jīng)實現(xiàn)了該功能，您就可以直接訪問它，否則，瀏覽器會向您提供一個暫時盡量模仿標準功能的實現(xiàn)。Polyfill 易于使用，但實現(xiàn)起來可能比較復雜。清單 6 演示了 requestAnimationFrame() 的一個 polyfill 的實現(xiàn)：
 

本文版權歸傳智播客web前端開發(fā)學院所有，歡迎轉載，轉載請注明作者出處，謝謝！
作者：傳智播客web前端培訓學院；
首發(fā)：http://www.xamj520.com/web/