網(wǎng)頁(yè)中基于HTML5 canvas的動(dòng)畫實(shí)現(xiàn)

龔麗

摘要：canvas是HTML5新增的一個(gè)非常重要的元素，通過(guò)這個(gè)元素，我們可以在網(wǎng)頁(yè)上創(chuàng)建畫布，并在畫布上繪制任意圖形或圖像。canvas還有一個(gè)特性就是可以在其內(nèi)部創(chuàng)建動(dòng)畫，通過(guò)設(shè)置時(shí)間循環(huán)，讓圖形或圖像動(dòng)起來(lái)。

關(guān)鍵詞：HTML5 canvas元素 繪制圖形 drawlmage（） setlnterval（）

引言

1基本圖形繪制

在網(wǎng)頁(yè)中繪制基本圖形，需要經(jīng)過(guò)以下3個(gè)步驟：

（1）在HTML頁(yè)面文檔中放置一個(gè)canvas元素，相當(dāng)于創(chuàng)建了一個(gè)矩形繪圖區(qū)域，并設(shè)置canvas元素的id。

（3）通過(guò)繪圖API在頁(yè)面中繪制各種圖形。

下面我們舉例來(lái)看矩形、圓形的繪制編程。

首先，在HTML文檔中放置元素，元素本身是不包含寬度、高度及內(nèi)容，也不會(huì)在屏幕上有任何顯示，所以大部分情況下在創(chuàng)建時(shí)注明寬度及高度，并設(shè)置id。

在瀏覽器運(yùn)行結(jié)果如下圖1。

2在canvas中繪制圖像

在HTML5中，除了可以繪制形狀，也可以通過(guò)canvas API繪制圖像文件，并對(duì)圖像進(jìn)行平鋪、裁剪、像素處理等操作。

繪制圖像時(shí)，需要使用drawlmage（）方法，該方法有3種調(diào)用格式：

ctx.drawlmage（image， x，y）;

其中l(wèi)rnage為圖像對(duì)象，x、y為繪制時(shí)該圖像在畫布中的起始坐標(biāo)。

ctx.drawlmage（image， x，y.w， h）;

前三個(gè)參數(shù)與第一種調(diào)用格式相同，w、h為圖像縮放至畫布中的寬度和高度。

ctx. drawlmage（image， sx.sy.sw.sh.dx. chr. dw， dh）;

這種調(diào)用格式有9個(gè)參數(shù)，主要實(shí)現(xiàn)對(duì)原圖的局部或全部顯示。其中image，dx，dy， dw，dh的用法與第二種格式相同，參數(shù)sx，sy，sw，sh表示源圖像需要裁剪的范圍。

繪制圖像時(shí)首先使用不帶參數(shù)的new方法創(chuàng)建Image對(duì)象，并設(shè)置Image對(duì)象的src屬性，即需要繪制的圖像文件路徑。再使用drawlmage0方法繪制。比如我們將一張風(fēng)車圖像繪制到canvas畫布中。代碼如下：

在瀏覽器運(yùn)行結(jié)果如下圖2。

3動(dòng)畫實(shí)現(xiàn)

（1）編寫繪制圖形或圖像的函數(shù);

（2）自定義一個(gè)函數(shù)，用于圖形或圖像的移動(dòng)或其他動(dòng)作;

（3）使用setlnterval（）方法設(shè)置動(dòng)畫執(zhí)行的間隔時(shí)間，反復(fù)執(zhí)行上面的自定義函數(shù)。

（4）當(dāng)需要停止循環(huán)時(shí)，用clearlnterval（）清空計(jì)時(shí)器。

setlnterval方法為HTML中固有的方法，setlnterval（）每隔一段時(shí)間調(diào)用一次函數(shù)，即設(shè)置循環(huán)的計(jì)時(shí)器。該方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)表示執(zhí)行的函數(shù)，第二個(gè)參數(shù)為時(shí)間間隔，單位為毫秒。編寫動(dòng)畫腳本時(shí)有一點(diǎn)需要特別注意，當(dāng)我們移動(dòng)繪制好的圖形或圖像時(shí)，其實(shí)就是對(duì)圖形或圖像進(jìn)行重繪，這時(shí)要先清空，如果不清空，新畫的形狀就會(huì)重疊到原形狀上。

運(yùn)行結(jié)果是小球會(huì)在畫布框中上下左右來(lái)回移動(dòng)碰到墻（即邊框）則反彈。

圖像動(dòng)畫

我們?cè)賮?lái)看一個(gè)圖像動(dòng)畫的實(shí)現(xiàn)，在canvas中繪制風(fēng)車圖像，并讓風(fēng)車旋轉(zhuǎn)起來(lái)。

translate0方法能平移坐標(biāo)原點(diǎn)，在此例中我們把坐標(biāo)原點(diǎn)從畫布左上角的默認(rèn)位置移動(dòng)到畫布中心，這樣圖形圍繞原點(diǎn)旋轉(zhuǎn)，就會(huì)在畫布中間。它的兩個(gè)參數(shù)分別是x方向移動(dòng)的值及y方向移動(dòng)的值。rotate0方法能將原點(diǎn)坐標(biāo)進(jìn)行旋轉(zhuǎn)，從而實(shí)現(xiàn)圖形的旋轉(zhuǎn)。它只有一個(gè)參數(shù)，即旋轉(zhuǎn)的角度。旋轉(zhuǎn)默認(rèn)以順時(shí)針方向進(jìn)行，要想逆時(shí)針旋轉(zhuǎn)，則將角度設(shè)定為負(fù)數(shù)就可以了。

4結(jié)束語(yǔ)

在中創(chuàng)建動(dòng)畫雖然實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，但不斷的圖形重繪非常消耗CPU資源，若需要在移動(dòng)設(shè)備的瀏覽器中使用，必須考慮動(dòng)畫（或者游戲）的優(yōu)化。比如上例中的風(fēng)車旋轉(zhuǎn)動(dòng)畫，由于要不斷重繪風(fēng)車圖像，該過(guò)程中，當(dāng)擦除整個(gè)canvas后，瀏覽器到達(dá)重繪點(diǎn)，會(huì)繪制空白的canvas，從而造成視覺上的閃爍問題。可以采用雙緩沖方法來(lái)解決，即獲取到頁(yè)面中的canvas對(duì)象之后，創(chuàng)建一個(gè)與頁(yè)面canvas同樣大小的緩沖canvas對(duì)象。繪圖時(shí)先將圖像繪制到緩沖canvas中，等到圖像繪制完全后再把整個(gè)緩沖canvas繪制到頁(yè)面canvas中。

參考文獻(xiàn)

[1]《HTML5從入門到精通》明日科技編著.北京：清華大學(xué)出版社，2012： 347-348

[2]《HTML5與CSS3權(quán)威指南》陸凌牛著，北京：機(jī)械工業(yè)出版社，2012： 107-111

[3]《HTML5實(shí)戰(zhàn)》 陶國(guó)榮著，北京：機(jī)械工業(yè)出版社，2012： 185-188