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