大家都知道 HTML5 新增標(biāo)簽中，其中 Canvas 元素的功能也是最受關(guān)注之一，使用HTML5中的Canvas后，可以通過javascript繪制位圖圖形。過去通過flash等插件實(shí)現(xiàn)的圖形以及動畫，現(xiàn)在只需使用javascript就能夠?qū)崿F(xiàn)。另外，通過IMG標(biāo)簽或者video標(biāo)簽可以將圖形或者視頻抓圖組合到Canvas中，然后從中取出像素?cái)?shù)據(jù)。Canvas對未來WEB開發(fā)意義重大。

　　為了繪制動態(tài)的圖形，一般按照時(shí)間順序繪制不斷變化的圖形，也可以用相同的原理來實(shí)現(xiàn)動畫效果。過去必須通過FLASH插件才能實(shí)現(xiàn)的功能，現(xiàn)在由Canvas就能夠完成，充分體現(xiàn)了Canvas功能的強(qiáng)大。

　　基本用法規(guī)范：

　　首先，必須在HTML中追加canvas標(biāo)簽，然后通過javascript在其中繪制圖形。

　　使用Canvas進(jìn)行圖形繪制的基本步驟如下：

　　1、取得Canvas對象。
　　2、從Canvas對象中獲取繪圖用的上下文。
　　3、使用上下文中的方法與屬性進(jìn)行繪圖。

　　下面按照以上的步驟進(jìn)行詳細(xì)解說。

　?。?）Canvas對象的取得：

　　為了能從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)簽所代表的對象。如下：

　　<script type="text/javascript">

　　var=document.getElementById("t_canvas");

　　//…

　　</script>

　　這樣就可取得HTML中設(shè)置為id=”t_canvas”的標(biāo)簽所代表的對象了。

　?。?）由Canvas對象取得繪圖用的上下文：

　　僅僅取得Canvas對象是無法進(jìn)行圖形繪制的，還必須由Canvas對象中取得繪圖用的上下文(context)。

　　這個(gè)可能不大好理解，直觀地說，Canvas對象就相當(dāng)于繪圖用的圖紙，而上下文(context)就相當(dāng)于繪圖用的畫筆。另外，英文單詞context，我們這里將其翻譯為“上下文”，也有“前后關(guān)系”、“上下連貫性”等意思。在多數(shù)編程語言中，涉及環(huán)境信息控制的時(shí)候，通常都會用到”context”這個(gè)概念，此處即是控制繪圖信息的意思。

　　下述代碼中，從Canvas對象中取得繪圖用的上下文，并將其何在在變量ctx中。

　　var ctx = canvas.getContext("2d");

　　這里必須將上下文種類指定為”2d”(二維圖形)。若將來可實(shí)現(xiàn)三維圖形的繪制功能，上下文種類將設(shè)置為“3d”，但是現(xiàn)階段只能繪制二維圖形。

　?。?）使用上下文(context)之后，就可以調(diào)用其中的方法或?qū)傩赃M(jìn)行具體的圖形繪制。例如，指定顏色時(shí)使用fillStyle屬性，繪制矩形時(shí)使用fillRect()方法等。

　　ctx.fillStyle="rgb(255,0,0)"; //指定填充顏色

　　ctx.fillRect(50,50,200,200); //繪制矩形

　　這樣一個(gè)填充為紅色的矩形就繪制出來了。