《canvas做游戲?qū)嵺`分享》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、HTML5教程

2、來自www.fanganwang.comCanvas做游戲?qū)嵺`分享1.游戲的基本內(nèi)容1.1什么是動(dòng)畫?????動(dòng)畫是通過連續(xù)播放一系列畫面，給視覺造成連續(xù)變化的圖畫。它的基本原理與電影、電視一樣，都是視覺原理。醫(yī)學(xué)已證明，人類具有視覺暫留的特性，就是說人的眼睛看到一幅畫或一個(gè)物體后，在1/24秒內(nèi)不會(huì)消失。利用這一原理，在一幅畫還沒有消失前播放出下一幅畫，就會(huì)給人造成一種流暢的視覺變化效果。因此，電影采用了每秒24幅畫面的速度拍攝播放，電視采用了每秒25幅（PAL制，中央電視臺(tái)的動(dòng)畫就是PAL制）或30幅（NSTC制）畫面的速度拍攝播放。如果以每秒低于24

3、幅畫面的速度拍攝播放，就會(huì)出現(xiàn)停頓現(xiàn)象。???????從播放效果上看，分為順序動(dòng)畫（連續(xù)動(dòng)作）和交互式動(dòng)畫（反復(fù)動(dòng)作）。逐幀動(dòng)畫是一種常見的動(dòng)畫形式（FrameByFrame），其原理是在“連續(xù)的關(guān)鍵幀”中分解動(dòng)畫動(dòng)作，也就是在時(shí)間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動(dòng)畫。1.2使用HTML5來做動(dòng)畫???????HTML5制作的動(dòng)畫主要是逐幀動(dòng)畫。目前主要有DOM,SVG與Canvas三種方式來實(shí)現(xiàn)。在此我們主要討論Canvas方式來制作動(dòng)畫。Canvas的支持???????到目前為止，基本所有瀏覽器?的最新版本均提供了對canvas的全面支持?；凇皾u近增強(qiáng)

4、，優(yōu)雅降級”的移動(dòng)互聯(lián)網(wǎng)應(yīng)用體驗(yàn)，如果用戶使用的瀏覽器版本較低，可以在canvas標(biāo)簽中寫入信息來提示用戶升級瀏覽器。如：HTML5教程

5、來自www.fanganwang.com您的瀏覽器不支持此動(dòng)畫，請升級您的瀏覽器?如果要使用編程的方式來檢測對于canvas的支持程度，可以使用如下代碼：if(document.createElement(“canvas”).getContext(“2d”)){console.log(“當(dāng)前瀏覽器支持canvas”);}當(dāng)然，也可以引入第三方的開源JavaScript庫(http://code.goog

6、le.com/p/explorercanvas/),在不支持canvas的瀏覽器中來模擬canvas的各種API。由于各個(gè)設(shè)備及瀏覽器版本的實(shí)現(xiàn)方式不同，為了保證用戶得到一致的體驗(yàn)，我們需要在盡可能多的設(shè)備及瀏覽器上對我們的游戲進(jìn)行測試及調(diào)優(yōu)。HTML5基本文檔模板?????????我們的游戲需要在一個(gè)HTML文檔中的canvas標(biāo)簽中渲染，在此我們創(chuàng)建一個(gè)最基本的HTML文檔模板。如下

7、ype=”text/css”href="style.css">HTML5教程

8、來自www.fanganwang.com簡單瀏覽一下，剛開始我們定義了HTML5文檔類型，之后定義了header標(biāo)簽，引用了外部的CSS文件。然后在body中定義了一個(gè)canvas標(biāo)簽來做為我們的游戲渲染容器。在

9、body標(biāo)簽結(jié)束前，我們創(chuàng)建了一個(gè)script標(biāo)簽，在其中來使用JavaScript來實(shí)現(xiàn)我們的游戲(之所以在header中使用link標(biāo)簽來加載外部css文件，或在body結(jié)束標(biāo)簽前再定義script標(biāo)簽、引入外部JavaScript文件，是為了保證頁面的逐步呈現(xiàn)速度，保證瀏覽器更高效地渲染HTML頁面，提高腳本下載的并行度，參見SteveSouders大神的《高性能網(wǎng)站建設(shè)指南》).?????可以看到，在腳本中我們?yōu)閣indow對象的onload事件指定了回調(diào)函數(shù)，即在所有的文檔元素加載完成后，再執(zhí)行回調(diào)函數(shù)中的程序。這可以保證canvas標(biāo)簽在我們使用之前已經(jīng)創(chuàng)建成

10、功。當(dāng)然，如果當(dāng)前的HTML文檔中有大量的資源（如圖片，音樂等）需要加載，那我們的window.onload事件會(huì)需要等待很長的時(shí)間才能執(zhí)行，在這種情況下最好是使用腳本來動(dòng)態(tài)加載相應(yīng)的資源，之后會(huì)介紹到相關(guān)的知識(shí)。其它?隨著開發(fā)游戲的復(fù)雜度增加，我們的代碼量及程序復(fù)雜度會(huì)隨之增長，這就需要我們對游戲進(jìn)行建模，將代碼按一定的規(guī)則放置在外部腳本文件中引入。同時(shí)，游戲開發(fā)中一個(gè)好的編輯器與調(diào)試工具也會(huì)得到事半功倍的效果。在此我們使用?sublimetext2?來做為編輯器，使用?chrome?中的開發(fā)人員工具來做為調(diào)試工具。?1.3