canvas：<canvas>标签只是图形容器，你必须使用脚本来绘制图形，有一个机遇javascript的绘图API。要从同一图形的一个<canvas>标记中移除元素，往往需要擦掉绘图重新绘制它。
大多数canvas绘图API都是定义在通过画布的getContext()方法获取的一个"绘图环境"对象上。
<canvas id="canvas" width="400" height="300">
您的浏览器不支持Canvas
</canvas>
<script>
var canvas=document.getElementById("canvas");
if(canvas.getContext)
{
var context=canvas.getContext("2d");
}
</script>
每个canvas都有一个对应的context对象，canvas API定义在这个context对象上面。使用getContext方法获取该对象。参数2d表示绘制2d平面图形。
1.context.beginPath方法表示开始绘制路径，MoveTo(x,y)设置线段的起点，lineTo(x,y)设置线段的终点。strokeStyle属性设置线段颜色，stroke方法用来给线段着色。
//绘制线段，有closePath（）整个变成一个封闭的图形。context.beginPath(); context.moveTo(10,200); context.lineTo(100,250); context.lineTo(100,500); context.closePath(); context.strokeStyle="#ffcc00"; context.stroke();
2.fillRect(x,y, width,height)方法用来绘制矩形，四个参数为矩形左上角的顶点及矩形宽高。fillStyle属性用来填充矩形颜色。
strokeRect方法与fillRect方法类似，用来绘制空心矩形。
clearRect方法用来清除某个矩形区域内容。你可以在已画好的矩形部分截取掉某部分。
//绘制矩形context.fillStyle="eeeeff"; context.fillRect(0,0,400,300);//绘制空心矩形context.strokeRect(0,0,400,300);//清除矩阵区域context.clearRect(0,0,200,100);
3.绘制圆形和扇形。
arc(x,y,radius,startAngle,endAngle,anticlockwise):radius表示半径，startAngle与endAngle则是扇形的起始角度和终止角度(用弧度表示)，anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。
//绘制实心的圆。context.beginPath(); context.fillStyle="#ff0000"; context.arc(100,100,30,5,Math.PI*1,true); context.fill();//绘制空心圆
context.beginPath(); context.arc(60,60,10,0,Math.PI*1,true); context.strokeStyle="#ff0000"; context.stroke();
4. createLinearGradient 设置渐变色
createLinearGradient(x1,y1,x2,y2):其中x1和y1是起点坐标，x2和y2是终点坐标。通过不同的坐标值，可以生成从上至下,从左到右的渐变等等。
//设置一矩形水平渐变色
var grd==context.createLinearGradient(0,50,100,50); grd.addColorStop(0,"#ff0"); grd.addColorStop(1,"#f00");context.fillStyle=grd;context.fillRect(10,10,200,300);
5.设置阴影
ctx.shadowOffsetX设置水平位移，ctx.shadowOffsetY设置垂直位移，ctx.shadowBlur设置模糊度，ctx.shadowColor设置阴影颜色。
//设置一矩形阴影。context.shadowOffsetX=10; context.shadowOffsetY=10; context.shadowBlur=5; context.shadowColor="rgba(0,0,0,0.5)"; context.fillStyle="red"; context.fillRect(20,20,200,200);
6.绘制文本
fillText(string,x,y)用来绘制文本，它的三个参数分别为文本内容，起点的X,Y坐标，使用前需要先用font设置字体,大小,样式。
strokeText()方法用来添加空心文字。
//设置字体。context.font="Bold 10px Arial";
context.textAligh="left";
context.fillStyle="red";
context.fillText("Hell0!",10,50);
//绘制空心字体
context.strokeText("Hello!",10,100);
7.载入图像：drawImage
canvas允许将图像文件插入画布，做法是读取图片后，使用drawImage方法在画布内进行重绘。由于图像的载入需要时间，drawImage方法需要在图片完全载入后才能调用。
drawImage方法接受三个参数，第一个参数是图像文件的DOM元素，即img标签，第二个第三个是图像左上角在canvas中的坐标。
//载入图像var img=new Image();
img.onload=function(){
if(img.width!=canvas.width)
img.width=canvas.width;
if(img.height!=canvas.height)
img.height=canvas.height;
context.clearRect(0,0,canvas.width,canvas.height);//将画布清空。
context.drawImage(img,0,0);
}
img.src="demo.jpg";