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

　　一、 Canvas是什么?

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

　　二、創(chuàng)建一個畫布（Canvas）

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

　　<canvas>簡單實例如下:

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

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

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

　　三、Canvas坐標(biāo)

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

　　四、Canvas路徑

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

　　五、Canvas 漸變

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

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

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

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

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