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ì)您有幫助就好】元
