canvas元素簡介
canvas元素簡介
使用canvas元素相當簡單，它只是一個單純的HTML標簽，外加寬高兩個特性。
<canvas
width
=
"500"
height
=
"500"
>
<!-- 在這里插入向后兼容的內容，不支持canvas的瀏覽器可以解析和顯示 -->
</canvas>
上面的代碼在頁面中插入了一個透明的畫布，canvas元素內部的內容可以在不支持canvas功能的瀏覽器下顯示你想給你的用戶提供的信息，聯想下<noscript>元素就可以。
瀏覽器支持
瀏覽器支持
很重要的一點就是瀏覽器對canvas的支持還是相當不錯的，所有現代瀏覽器都支持它，包括最新版的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 插件 。
畫布尺寸
畫布尺寸
當定義canvas元素的尺寸時，最好通過HTML設置它的width和height特性，因為通過CSS設置寬高會導致畫布按比例縮放到你設置的值，這背后有它的邏輯原因：在canvas元素的內部存在一個名為2d渲染環境（2d redering context）的對象，所以，通過CSS設置畫布尺寸會引起奇怪的效果。
探索2d渲染環境
探索2d 渲染環境
我們上面提到的canvas元素只是canvas功能的一部分，另一部分是2d渲染環境，它可以讓你實現很酷的看得到的東西。
需要完全理清的是：當你使用canvas，你不是在canvas元素上畫圖，事實上你是在canvas元素內部的2d渲染環境上。
坐標系統
坐標系統
如果你曾經使用過2d繪圖編程語言（比如ActionScript、Processing等），你應該會了解基于屏幕（screen-based）的坐標系統。canvas內部的2d渲染環境并沒有什么不同之處，它采用標準的笛卡爾坐標系統，原點位于屏幕左上角，向右移動會增加x坐標的值，向下移動會增加y坐標的值，很容易理解。
通常坐標系統的單位是屏幕的1像素。
操作2d渲染環境
操作2d渲染環境
需要利用Javascript提供的API來獲取2d渲染環境對象，該方法為：getContext()，看下簡單的例子：
<canvas
id
=
"csser-com-Canvas"
width
=
"500"
height
=
"500"
>
<!-- 向后兼容的內容 -->
</canvas>
<script>
var
canvas
=
document
.
getElementById
(
"csser-com-Canvas"
);
var
c
=
canvas
.
getContext
(
"2d"
);
</script>
通過調用canvas對象的getContext()方法，c變量就包含了指向2d渲染環境的引用，這意味著你現在已經完成了在畫布上繪圖的一切準備，接下來可以開始繪圖了。
繪制矩形
繪制矩形
獲得了2d渲染環境對象，就可以通過調用API提供的大量方法來進行繪圖了，一個最基本的方法就是fillRect()，通過它可以繪制一個填充顏色的矩形（顏色默認值為黑色）。
在c變量的下面增加以下代碼：
c
.
fillRect
(
0
,
0
,
50
,
50
);
這將在畫布左上角繪制繪制一個黑色背景的正方形：
在調用fillRect()方法時傳入了4個參數：
- 第一個是基于原點的x坐標位置
- 第二個是基于原點的y坐標位置
- 第三個是寬度
- 第四個是高度
fillRect的偽代碼看起來應該像這個樣子：
c
.
fillRect
(
x
,
y
,
width
,
height
);
很酷的是，不僅可以繪制填充的矩形，你還可以繪制線框矩形，使用strokeRect()方法，繪制四周產生描邊效果的矩形，如：
c
.
strokeRect
(
50
,
50
,
100
,
100
);
strokeRect的參數與fillRect是一致的，繪制的結果如下：
利用canvas繪圖，簡單、優美，所有的方法都很易懂，但是當放在一起使用可以讓你畫出很漂亮的圖形。
繪制路徑
繪制路徑
矩形是唯一一個可以通過單個API方法繪制的圖形，先把它放在一邊，我們來學習下路徑（Paths）繪制。使用路徑，可以繪制線條、連續的曲線以及復合圖形。
繪制一個簡單的路徑需要利用一些AIP方法：
beginPath
開始一個新路徑
moveTo
移動路徑的繪圖起點
lineTo
從
moveTo
定義的點開始繪制連續的路徑，或者從上一次的
lineTo
的終點開始繪制。
closePath
連接最后的點和最初的點并關閉路徑繪制
fill
用顏色填充路徑
stroke
描變路徑
嘗試執行下面的代碼：
c
.
beginPath
();
c
.
moveTo
(
50
,
50
);
c
.
lineTo
(
50
,
250
);
c
.
lineTo
(
250
,
250
);
c
.
closePath
;
c
.
fill
();
執行結果為：
你可以用同樣的方法繪制你希望的圖形，canvas還包含更高級的路徑繪制，比如圓弧（可以繪制圓形）和貝塞爾曲線（用于繪制很酷的曲線效果），總之，繪制路徑要比繪制矩形復雜的多。
改變顏色
改變顏色
到目前為止，我們的示例所繪制的都是填充或描邊的黑色，canvas也提供了一些屬性用于改變繪制圖形的顏色，它們是fillStyle和strokeStyle，它們的語法都是可以自解釋的，所以我們直接來改變一個矩形的填充顏色：
c
.
fillStyle
=
"rgb(255, 0, 0)"
;
c
.
fillRect
(
50
,
50
,
100
,
100
);
結果：
或者，你可以改變描邊的顏色：
c
.
strokeStyle
=
"rgb(255, 0, 0)"
;
c
.
strokeRect
(
50
,
50
,
100
,
100
);
結果：
fillStyle和strokeStyle屬性很漂亮的一點就是，它們都支持普通CSS顏色值，這意味著你可以使用RGB、RGBA、HSA、顏色名稱以及十六進制顏色值。
還有一點需要指出的是，改變畫布中的顏色值不會影響已經繪制的任何圖形，例如，如果你繪制了一個黑色的矩形，然后設置填充為紅色，接著繪制了另一個矩形，這時第一個矩形仍然為黑色。
改變線寬
改變線寬
除了可以改變顏色，還可以利用lineWidth屬性改變描邊線條的寬度，按照上面的例子，改變線條寬度：
c
.
lineWidth
=
20
;
c
.
strokeStyle
=
"#f00"
;
c
.
strokeRect
(
50
,
50
,
100
,
100
);
結果：
同樣的可以改變路徑的線寬：
c
.
lineWidth
=
20
;
c
.
beginPath
();
c
.
moveTo
(
50
,
50
);
c
.
lineTo
(
50
,
250
);
c
.
lineTo
(
250
,
250
);
c
.
closePath
();
c
.
stroke
();
結果：
還有一些其它的改變線條的方式，比如lineCap設置線條的末端，lineJoin設置線條的角。
刪除圖形
刪除圖形
最后我們來了解下如何刪除已經繪制的圖形，刪除圖形只需Javascript API提供的一個名為clearRect的方法，其原理是使參數指定的矩形區域背景變為透明。
本文示例畫布長寬分別為500像素，要想刪除整個畫布圖形，可以這樣做：
c
.
fillRect
(
50
,
50
,
100
,
100
);
c
.
clearRect
(
0
,
0
,
500
,
500
);
上面的代碼執行后，你會什么都看不到，事實上填充的矩形已經繪制，只是瞬間被刪除了，所以你看不到它。
如果你不清楚畫布的具體寬高，清除整個畫布可以這樣：
c
.
clearRect
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
刪除畫布中的區域
刪除畫布中的區域
如果你不想刪除整個畫布的圖形，而僅僅刪除畫布中的一個區域，假如，你繪制了一個黑色的正方形，旁邊繪制了一個紅色的正方形：
c
.
fillRect
(
50
,
50
,
100
,
100
);
c
.
fillStyle
=
"#f00"
;
c
.
fillRect
(
200
,
50
,
100
,
100
);
看起來是這個樣子：
接下來你可以通過clearRect刪除黑色背景的正方形而只保留紅色正方形：
c
.
clearRect
(
50
,
50
,
100
,
100
);
注意傳入clearRect的參數能確保能覆蓋要被刪除的圖形的區域。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
