前端開發(fā)

H5移動開發(fā)第五課：Canvas繪圖功能和三維效果

5706

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

今天25學堂跟大家重點來認識下這2個h5移動開發(fā)的重點特性。

第一個H5功能特性：Canvas繪圖功能

H5的canvas

HTML5 <canvas> 標簽用于繪制圖像（通過腳本，通常是 JavaScript）。

不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。

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

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

詳細的H5的canvas使用請參考《HTML 5 Canvas 參考手冊》

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

使用canvas開發(fā)的優(yōu)點和好處：

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

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

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

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

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

下面讓我們開始了解H5的canvas代碼具體編寫：

HTML部分只要聲明下canvas的id即可。當然你也可以定義繪制的畫布的長寬。

<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)境對象
ctx.moveTo(10,10);   //定義繪畫開始的位置
ctx.lineTo(150,50);  //畫一條直線，結束點坐標是x=150,y=50
ctx.stroke();  //描邊
</script>

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

h5實戰(zhàn)開發(fā)第一課

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

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

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

下面就是25學堂推薦給各位學習H5移動開發(fā)Canvas繪圖功能資料：

基礎必讀的：《HTML 5 Canvas 參考手冊》

1、如何開發(fā)一個簡單的HTML5 Canvas 小游戲

2、HTML5- Canvas入門詳細教程

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

4、HTML5 Canvas實戰(zhàn)之刮獎效果

如果你們還有更好的關于canvas的教程和資源可以分享給25學堂。

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

H5-canvas-視頻課程

炫麗的倒計時效果Canvas繪圖與動畫基礎

第二個H5功能特性：三維效果

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

在CSS3中有個非?？岬墓δ苁侨S渲染，也就說H5中能做出3D動畫甚至3D游戲。目前我們看到的H5中CSS3 3D的應用較少，這個也許會是下一個營銷類H5應用的熱點，建議大家持續(xù)關注。

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

H5-3D效果