HTML5怎樣創(chuàng)建畫(huà)布？使用畫(huà)布方法講解

　　在網(wǎng)頁(yè)中，畫(huà)布并不是默認(rèn)存在的，用戶首先需要?jiǎng)?chuàng)建畫(huà)布，然后通過(guò)一些對(duì)象和方法可以在畫(huà)布中繪制圖案，下面將分步驟講解使用畫(huà)布的方法。

　　1. 創(chuàng)建畫(huà)布

　　使用HTML5中的canvas標(biāo)簽可以在網(wǎng)頁(yè)中創(chuàng)建畫(huà)布。創(chuàng)建畫(huà)布的基本語(yǔ)法格式如下。

您的瀏覽器不支持canvas

　　在上面的語(yǔ)法格式中，canvas標(biāo)簽用于定義畫(huà)布，id屬性用于在JavaScript代碼中引用畫(huà)布。canvas標(biāo)簽是一個(gè)雙標(biāo)簽，用戶可以在中間輸入文字，當(dāng)瀏覽器不支持canvas標(biāo)簽，就會(huì)顯示輸入的文字信息。畫(huà)布有width和height兩個(gè)屬性用于定義畫(huà)布的寬度和高度，取值可以為數(shù)字或像素。

　　創(chuàng)建完成的畫(huà)布是透明的，沒(méi)有任何樣式，可以使用CSS為其設(shè)置邊框、背景等。需要注意的是，設(shè)置畫(huà)布寬高時(shí)，盡量不要使用CSS樣式控制其寬高，否則可能使畫(huà)布中的圖案變形。

　　2. 獲取畫(huà)布

　　要想在JavaScript中控制畫(huà)布，首先要獲取畫(huà)布。使用getElementById()方法可以獲取網(wǎng)頁(yè)中的畫(huà)布對(duì)象。例如下面的示例代碼，就是為了獲取id名為“cavs”的畫(huà)布，同時(shí)將獲取的畫(huà)布對(duì)象保存在變量“canvas”中。

var canvas = document.getElementById('cavs');

　　3. 準(zhǔn)備畫(huà)筆

　　有了畫(huà)布之后，要開(kāi)始繪圖，還需要準(zhǔn)備一只畫(huà)筆，這支畫(huà)筆就是context對(duì)象。context對(duì)象也被稱(chēng)為繪制環(huán)境，通過(guò)該對(duì)象，可以在畫(huà)布中繪制圖形。context對(duì)象可以使用JavaScript腳本獲得，具體語(yǔ)法如下所示：

canvas.getContext('2d');

　　在上面的語(yǔ)法中，參數(shù)“2d”代表畫(huà)筆的種類(lèi)，表示二維繪圖的畫(huà)筆，如果繪制三維圖形可以把參數(shù)替換為“webgl”，由于三維操作目前還沒(méi)有廣泛的應(yīng)用，這里了解即可。

　　在JavaScript中，我們通常會(huì)定義一個(gè)變量來(lái)保存獲取的context對(duì)象，例如下面的代碼。

var context = canvas.getContext('2d');

猜你喜歡：

HTML5 WebSocket Client使用詳解1

HTML5新增了哪些標(biāo)簽？

傳智教育H5教程：HTML5+CSS3視頻教程

傳智教育web前端培訓(xùn)課程