更新時(shí)間:2017-06-15 來(lái)源:黑馬程序員web前端開發(fā)學(xué)院 瀏覽量:
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ù)在畫布的 (0,0)
繪制背景圖像。稍后,我會(huì)在本文中修改該函數(shù),以便滾動(dòng)背景。而繪制平臺(tái)(它們不是圖像)需要更廣泛地使用 Canvas API。多用途的 drawImage() 方法您可以使用 Canvas 2D 上下文的 drawImage() 方法在畫布內(nèi)的任何地方繪制一個(gè)完整的圖像,或圖像內(nèi)的任何矩形區(qū)域,有選擇地沿著路線縮放圖像。除了圖像外,您還可以利用 drawImage() 繪制另一個(gè)畫布或一個(gè) video 元素當(dāng)前幀的內(nèi)容。這只是其中一個(gè)方法,但 drawImage() 還有助于便利地實(shí)現(xiàn)有趣的或者難以實(shí)現(xiàn)的應(yīng)用程序(如視頻編輯軟件)。
其中的 JavaScript 定義一個(gè)名稱為 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è)置您之后在畫布上繪制的任何圖形的不透明度。調(diào)用 context.translate() 將畫布的坐標(biāo)系(如圖 2 所示)在水平方向平移指定數(shù)量的像素。該平移和屬性設(shè)置是臨時(shí)的,因?yàn)檫@些操作是在 context.save() 和 context.restore() 調(diào)用之間執(zhí)行的。
3、使用setInterval()和requestAnimationFrame()對(duì)動(dòng)畫的實(shí)現(xiàn)
分析:從許多方面來(lái)看,HTML5 是程序員的烏托邦。沒有專用的 API,開發(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ā)明了一種被稱為 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前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處,謝謝!
作者:黑馬程序員web前端培訓(xùn)學(xué)院;
首發(fā):http://web.itheima.com/
WEB前端培訓(xùn)之David Geary對(duì)HTML5 的 2D 視頻游戲詳細(xì)剖析思路三
2017-06-15WEB前端開發(fā)之video標(biāo)簽使用教程
2017-06-15WEB前端培訓(xùn)之針對(duì)main.css改進(jìn)型模仿
2017-06-15WEB前端培訓(xùn)之HTML5 WebSocket Client使用詳解1
2017-06-15WEB前端培訓(xùn)之HTML5 WebSocket Client使用詳解2
2017-06-09WEB前端培訓(xùn)之web Storage可讓網(wǎng)頁(yè)將資料存于本地端的技術(shù)1
2017-06-09