canvas元素簡(jiǎn)介
canvas元素簡(jiǎn)介
使用canvas元素相當(dāng)簡(jiǎn)單,它只是一個(gè)單純的HTML標(biāo)簽,外加寬高兩個(gè)特性。
<canvas width = "500" height = "500" > <!-- 在這里插入向后兼容的內(nèi)容,不支持canvas的瀏覽器可以解析和顯示 --> </canvas>
上面的代碼在頁(yè)面中插入了一個(gè)透明的畫(huà)布,canvas元素內(nèi)部的內(nèi)容可以在不支持canvas功能的瀏覽器下顯示你想給你的用戶(hù)提供的信息,聯(lián)想下<noscript>元素就可以。
瀏覽器支持
瀏覽器支持
很重要的一點(diǎn)就是瀏覽器對(duì)canvas的支持還是相當(dāng)不錯(cuò)的,所有現(xiàn)代瀏覽器都支持它,包括最新版的IE9:
Internet Explorer 9.0 + Safari 3.0 + Firefox 3.0 + Chrome 3.0 + Opera 10.0 + iOS 1.0 + Android 1.0 +
有趣的是,你可以在IE8以及更低版本的IE瀏覽器下使用canvas功能,借助 ExplorerCanvas 插件 。
畫(huà)布尺寸
畫(huà)布尺寸
當(dāng)定義canvas元素的尺寸時(shí),最好通過(guò)HTML設(shè)置它的width和height特性,因?yàn)橥ㄟ^(guò)CSS設(shè)置寬高會(huì)導(dǎo)致畫(huà)布按比例縮放到你設(shè)置的值,這背后有它的邏輯原因:在canvas元素的內(nèi)部存在一個(gè)名為2d渲染環(huán)境(2d redering context)的對(duì)象,所以,通過(guò)CSS設(shè)置畫(huà)布尺寸會(huì)引起奇怪的效果。
探索2d渲染環(huán)境
探索2d 渲染環(huán)境
我們上面提到的canvas元素只是canvas功能的一部分,另一部分是2d渲染環(huán)境,它可以讓你實(shí)現(xiàn)很酷的看得到的東西。
需要完全理清的是:當(dāng)你使用canvas,你不是在canvas元素上畫(huà)圖,事實(shí)上你是在canvas元素內(nèi)部的2d渲染環(huán)境上。
坐標(biāo)系統(tǒng)
坐標(biāo)系統(tǒng)
如果你曾經(jīng)使用過(guò)2d繪圖編程語(yǔ)言(比如ActionScript、Processing等),你應(yīng)該會(huì)了解基于屏幕(screen-based)的坐標(biāo)系統(tǒng)。canvas內(nèi)部的2d渲染環(huán)境并沒(méi)有什么不同之處,它采用標(biāo)準(zhǔn)的笛卡爾坐標(biāo)系統(tǒng),原點(diǎn)位于屏幕左上角,向右移動(dòng)會(huì)增加x坐標(biāo)的值,向下移動(dòng)會(huì)增加y坐標(biāo)的值,很容易理解。
通常坐標(biāo)系統(tǒng)的單位是屏幕的1像素。
操作2d渲染環(huán)境
操作2d渲染環(huán)境
需要利用Javascript提供的API來(lái)獲取2d渲染環(huán)境對(duì)象,該方法為:getContext(),看下簡(jiǎn)單的例子:
<canvas id = "csser-com-Canvas" width = "500" height = "500" > <!-- 向后兼容的內(nèi)容 --> </canvas> <script> var canvas = document . getElementById ( "csser-com-Canvas" ); var c = canvas . getContext ( "2d" ); </script>
通過(guò)調(diào)用canvas對(duì)象的getContext()方法,c變量就包含了指向2d渲染環(huán)境的引用,這意味著你現(xiàn)在已經(jīng)完成了在畫(huà)布上繪圖的一切準(zhǔn)備,接下來(lái)可以開(kāi)始繪圖了。
繪制矩形
繪制矩形
獲得了2d渲染環(huán)境對(duì)象,就可以通過(guò)調(diào)用API提供的大量方法來(lái)進(jìn)行繪圖了,一個(gè)最基本的方法就是fillRect(),通過(guò)它可以繪制一個(gè)填充顏色的矩形(顏色默認(rèn)值為黑色)。
在c變量的下面增加以下代碼:
c . fillRect ( 0 , 0 , 50 , 50 );
這將在畫(huà)布左上角繪制繪制一個(gè)黑色背景的正方形:
在調(diào)用fillRect()方法時(shí)傳入了4個(gè)參數(shù):
- 第一個(gè)是基于原點(diǎn)的x坐標(biāo)位置
- 第二個(gè)是基于原點(diǎn)的y坐標(biāo)位置
- 第三個(gè)是寬度
- 第四個(gè)是高度
fillRect的偽代碼看起來(lái)應(yīng)該像這個(gè)樣子:
c . fillRect ( x , y , width , height );
很酷的是,不僅可以繪制填充的矩形,你還可以繪制線(xiàn)框矩形,使用strokeRect()方法,繪制四周產(chǎn)生描邊效果的矩形,如:
c . strokeRect ( 50 , 50 , 100 , 100 );
strokeRect的參數(shù)與fillRect是一致的,繪制的結(jié)果如下:
利用canvas繪圖,簡(jiǎn)單、優(yōu)美,所有的方法都很易懂,但是當(dāng)放在一起使用可以讓你畫(huà)出很漂亮的圖形。
繪制路徑
繪制路徑
矩形是唯一一個(gè)可以通過(guò)單個(gè)API方法繪制的圖形,先把它放在一邊,我們來(lái)學(xué)習(xí)下路徑(Paths)繪制。使用路徑,可以繪制線(xiàn)條、連續(xù)的曲線(xiàn)以及復(fù)合圖形。
繪制一個(gè)簡(jiǎn)單的路徑需要利用一些AIP方法:
beginPath 開(kāi)始一個(gè)新路徑 moveTo 移動(dòng)路徑的繪圖起點(diǎn) lineTo 從 moveTo 定義的點(diǎn)開(kāi)始繪制連續(xù)的路徑,或者從上一次的 lineTo 的終點(diǎn)開(kāi)始繪制。 closePath 連接最后的點(diǎn)和最初的點(diǎn)并關(guān)閉路徑繪制 fill 用顏色填充路徑 stroke 描變路徑
嘗試執(zhí)行下面的代碼:
c . beginPath (); c . moveTo ( 50 , 50 ); c . lineTo ( 50 , 250 ); c . lineTo ( 250 , 250 ); c . closePath ; c . fill ();
執(zhí)行結(jié)果為:
你可以用同樣的方法繪制你希望的圖形,canvas還包含更高級(jí)的路徑繪制,比如圓?。梢岳L制圓形)和貝塞爾曲線(xiàn)(用于繪制很酷的曲線(xiàn)效果),總之,繪制路徑要比繪制矩形復(fù)雜的多。
改變顏色
改變顏色
到目前為止,我們的示例所繪制的都是填充或描邊的黑色,canvas也提供了一些屬性用于改變繪制圖形的顏色,它們是fillStyle和strokeStyle,它們的語(yǔ)法都是可以自解釋的,所以我們直接來(lái)改變一個(gè)矩形的填充顏色:
c . fillStyle = "rgb(255, 0, 0)" ; c . fillRect ( 50 , 50 , 100 , 100 );
結(jié)果:
或者,你可以改變描邊的顏色:
c . strokeStyle = "rgb(255, 0, 0)" ; c . strokeRect ( 50 , 50 , 100 , 100 );
結(jié)果:
fillStyle和strokeStyle屬性很漂亮的一點(diǎn)就是,它們都支持普通CSS顏色值,這意味著你可以使用RGB、RGBA、HSA、顏色名稱(chēng)以及十六進(jìn)制顏色值。
還有一點(diǎn)需要指出的是,改變畫(huà)布中的顏色值不會(huì)影響已經(jīng)繪制的任何圖形,例如,如果你繪制了一個(gè)黑色的矩形,然后設(shè)置填充為紅色,接著繪制了另一個(gè)矩形,這時(shí)第一個(gè)矩形仍然為黑色。
改變線(xiàn)寬
改變線(xiàn)寬
除了可以改變顏色,還可以利用lineWidth屬性改變描邊線(xiàn)條的寬度,按照上面的例子,改變線(xiàn)條寬度:
c . lineWidth = 20 ; c . strokeStyle = "#f00" ; c . strokeRect ( 50 , 50 , 100 , 100 );
結(jié)果:
同樣的可以改變路徑的線(xiàn)寬:
c . lineWidth = 20 ; c . beginPath (); c . moveTo ( 50 , 50 ); c . lineTo ( 50 , 250 ); c . lineTo ( 250 , 250 ); c . closePath (); c . stroke ();
結(jié)果:
還有一些其它的改變線(xiàn)條的方式,比如lineCap設(shè)置線(xiàn)條的末端,lineJoin設(shè)置線(xiàn)條的角。
刪除圖形
刪除圖形
最后我們來(lái)了解下如何刪除已經(jīng)繪制的圖形,刪除圖形只需Javascript API提供的一個(gè)名為clearRect的方法,其原理是使參數(shù)指定的矩形區(qū)域背景變?yōu)橥该鳌?
本文示例畫(huà)布長(zhǎng)寬分別為500像素,要想刪除整個(gè)畫(huà)布圖形,可以這樣做:
c . fillRect ( 50 , 50 , 100 , 100 ); c . clearRect ( 0 , 0 , 500 , 500 );
上面的代碼執(zhí)行后,你會(huì)什么都看不到,事實(shí)上填充的矩形已經(jīng)繪制,只是瞬間被刪除了,所以你看不到它。
如果你不清楚畫(huà)布的具體寬高,清除整個(gè)畫(huà)布可以這樣:
c . clearRect ( 0 , 0 , canvas . width , canvas . height );
刪除畫(huà)布中的區(qū)域
刪除畫(huà)布中的區(qū)域
如果你不想刪除整個(gè)畫(huà)布的圖形,而僅僅刪除畫(huà)布中的一個(gè)區(qū)域,假如,你繪制了一個(gè)黑色的正方形,旁邊繪制了一個(gè)紅色的正方形:
c . fillRect ( 50 , 50 , 100 , 100 ); c . fillStyle = "#f00" ; c . fillRect ( 200 , 50 , 100 , 100 );
看起來(lái)是這個(gè)樣子:
接下來(lái)你可以通過(guò)clearRect刪除黑色背景的正方形而只保留紅色正方形:
c . clearRect ( 50 , 50 , 100 , 100 );
注意傳入clearRect的參數(shù)能確保能覆蓋要被刪除的圖形的區(qū)域。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
