不用说，HTML5添加的最受欢迎的功能就是<canvas>元素。这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。<canvas>元素最早是由苹果公司推出的。当时主要用在Dashboard微软中。很快，HTML5加入了这个元素，主流浏览器也迅速开始支持它。
与浏览器环境中的其他组件类似，<canvas>几组API构成，但并非所有浏览器都支持所有这些API。除了具备基本绘图能力的2D上下文，<canvas>还建议了一个名为WebGL的3D上下文。目前，支持该元素的浏览器都支持2D上下文及文本API，但对WebGL的支持还不够好。由于WebGL还是实验性的，因此要得到所有浏览器支持还需要很长一段时间。
基本用法
要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。下面就是<canvas>元素的例子：
<canvas id="drawing" width="200" height="200">A drawing of something</canvas>
与其他元素一样，<canvas>元素对应的DOM元素也有width和height属性，可以随意修改。而且，也能通过CSS为该元素添加样式，如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。
要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。传入“2d",就可以取得2D上下文对象。
var drawing =document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if（drawing.getContext）{
var context=drawing.getContext("2d");
//更对代码
}
在使用<canvas>元素之前，首先要检测getContext（）方法是否存在，这一步非常重要。有些浏览器会为HTML规范之外的元素创建默认的HTML元素对象。在这种情况下，即使drawing变量中保存着一个有效的元素引用，也检测不到getContext()方法。
使用toDataURL()方法，可以导出在<canvas>元素上绘制的图像。这个方法接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。比如，要取得画布中的一幅Png格式的图像，可以使用以下代码：
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
//取得图像的数据URL
var imgURL=drawing.toDataURL（"image/png"）;
//显示图像
var image=document.createElement("img");
image.src=imgURL;
document.body.appendChile(image);
}
默认情况下，浏览器会将图像编码为PNG格式。
2D上下文
使用2D绘图上下文提供的方法，可以绘制简单的2D图形，比如矩形、弧线和路径。2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是（0，0）。所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下。默认情况下，width和height表示水平和垂直两个方向上可用的像素数目。
填充和描边
2D上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle和strokeStyle.
这两个属性的值可以是字符串，可以使用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、RGB、RGBA、hsl或hsla。
举个例子：
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context=drawing.getContext("2d");
context.strokeStyle="red";
context.fillStyle="#0000ff";
}
以上代码将strokeStyle设置为red，将fillStyle设置为#0000ff。然后，所有涉及描边和填充的操作都将使用这两个样式，直至重新设置这两个值。（这两个属性值也可以是渐变对象或模式对象）。
绘制矩形
矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括fillRect()、strokeRect()和clearRect()。这三个方法都能接收4个参数：矩形的x坐标、矩形的y坐标、矩形的宽度和矩形的高度。这些参数的单位都是像素。
首先，fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle属性指定，比如：
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if（drawing.getContext){
var context=drawing.getContext("2d");
//绘制红色矩形
context.fillStyle="#ff0000";
context.fillRect(10,10,50,50);
//绘制半透明的蓝色矩形
context.fillStyle="rgba(0,0,255,0,5)";
context.fillRect(30,30,50,50);
}
以上代码首先将fillStyle设置为红色，然后从（10,10）处开始绘制矩形，矩形的宽和高均为50像素。然后，通过rgba()格式在将fillStyle设置为半透明的蓝色，在第一个矩形上面绘制第二个矩形。结果就是透过蓝色的矩形看到红色的矩形。
strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle属性指定。
举个例子：
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if（drawing.getContext）{
var context=drawing.getContext("2d");
//绘制红色描边矩形
context.strokeStyle="#ff0000";
context.strokeRect(10,10,50,50);
//绘制半透明的蓝色描边矩形
context.strokeStyle="rgba(0,0,255,0.5)";
context.strokeRect(30,30,50,50);
}
以上代码绘制了两个重置的矩形。不过，这两个矩形都只有框线，内部并没有填充颜色。
最后，clearRect()方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域，就可以生成有意思的效果，例如把某个形状切掉一块。
举个例子：
var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
var context=drawing.getContext("2d");
//绘制红色矩形
context.fillStyle="ff0000";
context.fillRect(10,10,50,50);
//绘制半透明的蓝色矩形
context.fillStyle="rgba(0,0,255,0.5）";
context.fillRect(30,30,50,50);
//在两个矩形重叠的地方清除一个小矩形
context.clearRect(40,40,10,10);
}
两个填充矩形重叠在一起，而重叠的地方又被清除了一个小矩形区域。
