WEB前端培訓(xùn)之David Geary對(duì)HTML5 的 2D 視頻游戲詳細(xì)剖析思路二

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

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

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


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

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

3、使用setInterval()和requestAnimationFrame()對(duì)動(dòng)畫(huà)的實(shí)現(xiàn)

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

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

本文版權(quán)歸黑馬程序員web前端開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：黑馬程序員web前端培訓(xùn)學(xué)院；
首發(fā)：http://web.itheima.com/