在學習html5教程中，canvas是很重要的一部分知識，需要熟練掌握。Canvas從另外一個角度來“模擬”頁面截圖的功能。它不是直接的去獲取截圖數據，而是將頁面中的內容在canvas繪制出來。功能還是能夠讓人眼前一亮。粵嵌HTML5教程就來教大家認識一下什么是Canvas：

　　一、 Canvas是什么?

　　HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成。<canvas> 標簽只是圖形容器，必須使用腳本來繪制圖形。你可以通過多種方法使用Canva繪制路徑,盒、圓、字符以及添加圖像。

　　二、創建一個畫布（Canvas）

　　一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制.注意: 默認情況下 <canvas> 元素沒有邊框和內容。

　　<canvas>簡單實例如下:

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

　　注意: 標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小。

　　提示:你可以在HTML頁面中使用多個 <canvas> 元素。

　　三、Canvas坐標

　　canvas 是一個二維網格。左上角坐標為 (0,0)，上面的 fillRect 方法擁有參數 (0,0,150,75)。意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。

　　四、Canvas路徑

　　在Canvas上畫線，我們將使用以下兩種方法：1、moveTo(x,y) 定義線條開始坐標；2、lineTo(x,y) 定義線條結束坐標；

　　五、Canvas 漸變

　　漸變可以填充在矩形, 圓形, 線條, 文本等等, 各種形狀可以自己定義不同的顏色。以下有兩種不同的方式來設置Canvas漸變：

　　1、createLinearGradient(x,y,x1,y1) - 創建線條漸變

　　2、createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

　　當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。設置fillStyle或strokeStyle的值為漸變，然后繪制形狀，如矩形，文本，或一條線。

　　通過以上這五點內容，大家對HTML5教程中的Canvas部分應該更加清晰了，其實學習起來并不會難到哪里去，關鍵還是需要記憶以及多操作去熟悉，這樣才能熟練掌握。有任何問題可咨詢粵嵌官網，或者參與粵嵌HTML5培訓，讓你迅速成為一名的前端開發者。