更新時(shí)間:2020-12-31 來(lái)源:黑馬程序員 瀏覽量:
在網(wǎng)頁(yè)中,畫布并不是默認(rèn)存在的,用戶首先需要?jiǎng)?chuàng)建畫布,然后通過(guò)一些對(duì)象和方法可以在畫布中繪制圖案,下面將分步驟講解使用畫布的方法。
1. 創(chuàng)建畫布
使用HTML5中的canvas標(biāo)簽可以在網(wǎng)頁(yè)中創(chuàng)建畫布。創(chuàng)建畫布的基本語(yǔ)法格式如下。
<canvas id="畫布名稱" width="數(shù)值" height="數(shù)值">您的瀏覽器不支持canvas</canvas>
在上面的語(yǔ)法格式中,canvas標(biāo)簽用于定義畫布,id屬性用于在JavaScript代碼中引用畫布。canvas標(biāo)簽是一個(gè)雙標(biāo)簽,用戶可以在中間輸入文字,當(dāng)瀏覽器不支持canvas標(biāo)簽,就會(huì)顯示輸入的文字信息。畫布有width和height兩個(gè)屬性用于定義畫布的寬度和高度,取值可以為數(shù)字或像素。
創(chuàng)建完成的畫布是透明的,沒(méi)有任何樣式,可以使用CSS為其設(shè)置邊框、背景等。需要注意的是,設(shè)置畫布寬高時(shí),盡量不要使用CSS樣式控制其寬高,否則可能使畫布中的圖案變形。
2. 獲取畫布
要想在JavaScript中控制畫布,首先要獲取畫布。使用getElementById()方法可以獲取網(wǎng)頁(yè)中的畫布對(duì)象。例如下面的示例代碼,就是為了獲取id名為“cavs”的畫布,同時(shí)將獲取的畫布對(duì)象保存在變量“canvas”中。
var canvas = document.getElementById('cavs');
3. 準(zhǔn)備畫筆
有了畫布之后,要開始繪圖,還需要準(zhǔn)備一只畫筆,這支畫筆就是context對(duì)象。context對(duì)象也被稱為繪制環(huán)境,通過(guò)該對(duì)象,可以在畫布中繪制圖形。context對(duì)象可以使用JavaScript腳本獲得,具體語(yǔ)法如下所示:
canvas.getContext('2d');
在上面的語(yǔ)法中,參數(shù)“2d”代表畫筆的種類,表示二維繪圖的畫筆,如果繪制三維圖形可以把參數(shù)替換為“webgl”,由于三維操作目前還沒(méi)有廣泛的應(yīng)用,這里了解即可。
在JavaScript中,我們通常會(huì)定義一個(gè)變量來(lái)保存獲取的context對(duì)象,例如下面的代碼。
var context = canvas.getContext('2d');
Web前端開發(fā)培訓(xùn)之HTML5 如何重新定義web