大家都知道 HTML5 新增標(biāo)簽中，其中 Canvas 元素的功能也是最受關(guān)注之一，使用HTML5中的Canvas后，可以通過(guò)javascript繪制位圖圖形。過(guò)去通過(guò)flash等插件實(shí)現(xiàn)的圖形以及動(dòng)畫(huà)，現(xiàn)在只需使用javascript就能夠?qū)崿F(xiàn)。另外，通過(guò)IMG標(biāo)簽或者video標(biāo)簽可以將圖形或者視頻抓圖組合到Canvas中，然后從中取出像素?cái)?shù)據(jù)。Canvas對(duì)未來(lái)WEB開(kāi)發(fā)意義重大。
為了繪制動(dòng)態(tài)的圖形，一般按照時(shí)間順序繪制不斷變化的圖形，也可以用相同的原理來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。過(guò)去必須通過(guò)FLASH插件才能實(shí)現(xiàn)的功能，現(xiàn)在由Canvas就能夠完成，充分體現(xiàn)了Canvas功能的強(qiáng)大。
基本用法規(guī)范：
首先，必須在HTML中追加canvas標(biāo)簽，然后通過(guò)javascript在其中繪制圖形。
使用Canvas進(jìn)行圖形繪制的基本步驟如下：
1、取得Canvas對(duì)象。
2、從Canvas對(duì)象中獲取繪圖用的上下文。
3、使用上下文中的方法與屬性進(jìn)行繪圖。
下面按照以上的步驟進(jìn)行詳細(xì)解說(shuō)。
（1）Canvas對(duì)象的取得：
為了能從javascript中使用canvas標(biāo)簽，必須在canvas標(biāo)簽中追加ID（有了id屬性，就可控制具體的標(biāo)簽了），完整代碼如下：
<canvas id="t_canvas" width="400" height="400"></canvas>
接著就可以使用document.getElementById()方法，取得canvas標(biāo)簽所代表的對(duì)象。如下：
<script type="text/javascript">
var=document.getElementById("t_canvas");
//…
</script>
這樣就可取得HTML中設(shè)置為id=”t_canvas”的標(biāo)簽所代表的對(duì)象了。
（2）由Canvas對(duì)象取得繪圖用的上下文：
僅僅取得Canvas對(duì)象是無(wú)法進(jìn)行圖形繪制的，還必須由Canvas對(duì)象中取得繪圖用的上下文(context)。
這個(gè)可能不大好理解，直觀地說(shuō)，Canvas對(duì)象就相當(dāng)于繪圖用的圖紙，而上下文(context)就相當(dāng)于繪圖用的畫(huà)筆。另外，英文單詞context，我們這里將其翻譯為“上下文”，也有“前后關(guān)系”、“上下連貫性”等意思。在多數(shù)編程語(yǔ)言中，涉及環(huán)境信息控制的時(shí)候，通常都會(huì)用到”context”這個(gè)概念，此處即是控制繪圖信息的意思。
下述代碼中，從Canvas對(duì)象中取得繪圖用的上下文，并將其何在在變量ctx中。
var ctx = canvas.getContext("2d");
這里必須將上下文種類(lèi)指定為”2d”(二維圖形)。若將來(lái)可實(shí)現(xiàn)三維圖形的繪制功能，上下文種類(lèi)將設(shè)置為“3d”，但是現(xiàn)階段只能繪制二維圖形。
（3）使用上下文(context)之后，就可以調(diào)用其中的方法或?qū)傩赃M(jìn)行具體的圖形繪制。例如，指定顏色時(shí)使用fillStyle屬性，繪制矩形時(shí)使用fillRect()方法等。
ctx.fillStyle="rgb(255,0,0)"; //指定填充顏色
ctx.fillRect(50,50,200,200); //繪制矩形
這樣一個(gè)填充為紅色的矩形就繪制出來(lái)了。
