大家都知道 HTML5 新增标签中，其中 Canvas 元素的功能也是最受关注之一，使用HTML5中的Canvas后，可以通过javascript绘制位图图形。过去通过flash等插件实现的图形以及动画，现在只需使用javascript就能够实现。另外，通过IMG标签或者video标签可以将图形或者视频抓图组合到Canvas中，然后从中取出像素数据。Canvas对未来WEB开发意义重大。
为了绘制动态的图形，一般按照时间顺序绘制不断变化的图形，也可以用相同的原理来实现动画效果。过去必须通过FLASH插件才能实现的功能，现在由Canvas就能够完成，充分体现了Canvas功能的强大。
基本用法规范：
首先，必须在HTML中追加canvas标签，然后通过javascript在其中绘制图形。
使用Canvas进行图形绘制的基本步骤如下：
1、取得Canvas对象。
2、从Canvas对象中获取绘图用的上下文。
3、使用上下文中的方法与属性进行绘图。
下面按照以上的步骤进行详细解说。
（1）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中设置为id=”t_canvas”的标签所代表的对象了。
（2）由Canvas对象取得绘图用的上下文：
仅仅取得Canvas对象是无法进行图形绘制的，还必须由Canvas对象中取得绘图用的上下文(context)。
这个可能不大好理解，直观地说，Canvas对象就相当于绘图用的图纸，而上下文(context)就相当于绘图用的画笔。另外，英文单词context，我们这里将其翻译为“上下文”，也有“前后关系”、“上下连贯性”等意思。在多数编程语言中，涉及环境信息控制的时候，通常都会用到”context”这个概念，此处即是控制绘图信息的意思。
下述代码中，从Canvas对象中取得绘图用的上下文，并将其何在在变量ctx中。
var ctx = canvas.getContext("2d");
这里必须将上下文种类指定为”2d”(二维图形)。若将来可实现三维图形的绘制功能，上下文种类将设置为“3d”，但是现阶段只能绘制二维图形。
（3）使用上下文(context)之后，就可以调用其中的方法或属性进行具体的图形绘制。例如，指定颜色时使用fillStyle属性，绘制矩形时使用fillRect()方法等。
ctx.fillStyle="rgb(255,0,0)"; //指定填充颜色
ctx.fillRect(50,50,200,200); //绘制矩形
这样一个填充为红色的矩形就绘制出来了。
