由于移動(dòng)設(shè)備對(duì)HTML5的較好支持，經(jīng)常有活動(dòng)用刮獎(jiǎng)、繪制的小游戲和滑動(dòng)模糊的效果在微信朋友圈瘋狂的轉(zhuǎn)發(fā)。這些都是利用html5的Canvas繪圖功能和三維效果。

今天25學(xué)堂跟大家重點(diǎn)來(lái)認(rèn)識(shí)下這2個(gè)h5移動(dòng)開(kāi)發(fā)的重點(diǎn)特性。

第一個(gè)H5功能特性：Canvas繪圖功能

HTML5 <canvas> 標(biāo)簽用于繪制圖像（通過(guò)腳本，通常是 JavaScript）。

不過(guò)，<canvas> 元素本身并沒(méi)有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來(lái)完成實(shí)際的繪圖任務(wù)。

getContext() 方法可返回一個(gè)對(duì)象，該對(duì)象提供了用于在畫(huà)布上繪圖的方法和屬性。

本手冊(cè)提供完整的 getContext("2d") 對(duì)象屬性和方法，可用于在畫(huà)布上繪制文本、線條、矩形、圓形等等。

詳細(xì)的H5的canvas使用請(qǐng)參考《HTML 5 Canvas 參考手冊(cè)》

Canvas 是 H5 的畫(huà)布元素，即一個(gè) DOM 元素。通過(guò)腳本控制邏輯給畫(huà)布上增加文字與圖像，而瀏覽器只需要繪制一次形成一幅圖。

使用canvas開(kāi)發(fā)的優(yōu)點(diǎn)和好處：

1、只用一個(gè) Canvas DOM 元素，降低 DOM 數(shù)量與渲染的復(fù)雜度，可以將原來(lái) CPU 密集型變成 GPU 操作。絕大多數(shù)針對(duì) Canvas 是用硬件 GPU 加速渲染。

2、GPU 的 ALU（計(jì)算單元） 比 CPU 要多很多，而控制運(yùn)算（邏輯）則可以用 JavaScript 在 CPU 里做，甚至還可以用 WebWorker 多線程處理 CPU 密集型的操作，從而達(dá)到充分利用硬件資源的能力。

3、Canvas 畫(huà)布無(wú)論是 JavaScript & H5，還是 native 都有類似的 API。所以：本地調(diào)試可在瀏覽器里完成。

4、最差方案可以用 Canvas UI 跑在瀏覽器里。

5、更進(jìn)一步，可以把瀏覽器 Canvas 接口的反射到用 native 畫(huà)布上，以此提高性能。

下面讓我們開(kāi)始了解H5的canvas代碼具體編寫(xiě)：

HTML部分只要聲明下canvas的id即可。當(dāng)然你也可以定義繪制的畫(huà)布的長(zhǎng)寬。

<canvas id="myCanvas"></canvas>
<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //獲取該canvas的2D繪圖環(huán)境對(duì)象
ctx.moveTo(10,10);   //定義繪畫(huà)開(kāi)始的位置
ctx.lineTo(150,50);  //畫(huà)一條直線，結(jié)束點(diǎn)坐標(biāo)是x=150,y=50
ctx.stroke();  //描邊
</script>

H5的canvas的具體使用流程：先定義繪圖的畫(huà)布。其次，構(gòu)建繪圖環(huán)境對(duì)象。最后，開(kāi)始繪制我們想要的元素和圖形。

25學(xué)堂的小編為了讓各位童鞋方便理解：

你可以將H5的繪圖功能類比為Flash，但是唯一的決定性區(qū)別是，F(xiàn)lash做出來(lái)的動(dòng)畫(huà)無(wú)法在移動(dòng)端的瀏覽器中瀏覽，因?yàn)锳dobe早已在2012年就停止了對(duì)移動(dòng)端flash的開(kāi)發(fā)。毫無(wú)疑問(wèn)，未來(lái)的移動(dòng)網(wǎng)頁(yè)游戲和動(dòng)畫(huà)會(huì)是H5的天下。

從技術(shù)實(shí)現(xiàn)的角度，H5配合JS（一種程序語(yǔ)言）可以做出任何二維動(dòng)畫(huà)，并且因?yàn)槭蔷W(wǎng)頁(yè)元素，所有元素均可以監(jiān)測(cè)到用戶點(diǎn)擊的數(shù)據(jù)，也就是說(shuō)你可以知道用戶在H5動(dòng)畫(huà)網(wǎng)頁(yè)中的所有交互行為。但是，具體到實(shí)際應(yīng)用，我們就要考慮周期、成本，和用戶體驗(yàn)的問(wèn)題，復(fù)雜的動(dòng)畫(huà)相應(yīng)的制作周期和成本會(huì)提高，同時(shí)也有可能影響加載速度等用戶體驗(yàn)相關(guān)的問(wèn)題。

下面就是25學(xué)堂推薦給各位學(xué)習(xí)H5移動(dòng)開(kāi)發(fā)Canvas繪圖功能資料：

基礎(chǔ)必讀的：《HTML 5 Canvas 參考手冊(cè)》

1、如何開(kāi)發(fā)一個(gè)簡(jiǎn)單的HTML5 Canvas 小游戲

2、HTML5- Canvas入門(mén)詳細(xì)教程

3、HTML5教程資源分享第一站

4、HTML5 Canvas實(shí)戰(zhàn)之刮獎(jiǎng)效果

如果你們還有更好的關(guān)于canvas的教程和資源可以分享給25學(xué)堂。

下面再來(lái)推薦慕課網(wǎng)的關(guān)于H5的canvas的視頻教程：

炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫(huà)基礎(chǔ)

第二個(gè)H5功能特性：三維效果

H5的華麗效果離不開(kāi)一種叫CSS的技術(shù)，形象的說(shuō)，如果把HTML5比作漫畫(huà)的素描稿，CSS就是上色用的，相當(dāng)于word界面上方的格式工具欄，如果沒(méi)有CSS我們看到的H5網(wǎng)頁(yè)就只能以“素顏”見(jiàn)人了。如果你熟悉互聯(lián)網(wǎng)技術(shù)的命名規(guī)則你應(yīng)該能知道CSS3就是CSS的升級(jí)版本。

在CSS3中有個(gè)非?？岬墓δ苁侨S渲染，也就說(shuō)H5中能做出3D動(dòng)畫(huà)甚至3D游戲。目前我們看到的H5中CSS3 3D的應(yīng)用較少，這個(gè)也許會(huì)是下一個(gè)營(yíng)銷類H5應(yīng)用的熱點(diǎn)，建議大家持續(xù)關(guān)注。

代表案例：程序員給女朋友用HTML5制作的3D相冊(cè)

程序員給女朋友用HTML5制作的3D相冊(cè)，使用鼠標(biāo)拖拽，能看到3D旋轉(zhuǎn)效果，點(diǎn)擊相片，相片能放大，移近。程序員發(fā)揮自己的專長(zhǎng)，這是那些不懂編程的人望塵莫及的。本相冊(cè)使用了HTML5的畫(huà)布技術(shù)，需要谷歌瀏覽器或火狐瀏覽器等現(xiàn)代瀏覽器才能正常觀看。

欣賞地址：http://www.webhek.com/misc/3d-album