canvas
用于绘制图像，自己并没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上，拥有绘制路径，矩形，圆，字符以及图像等功能。 所有的标签只是图形的容器，必须使用JavaScript的 API 操作绘图。
首先是需要在页面中有 canvas 这个图形容器
<canvas id="canvas" height="600"width="800">
您的浏览器不支持canvas！ </canvas>var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
描绘路径的方法：
beginPath(); : 开始路径绘制。
moveTo(x , y) : 显示的指定路径的起点为 x , y，左上角为原点，横向为 X 轴，纵向为 Y 轴。canvas 默认起点为 0 ， 0。
lineTo(x , y) : 描绘一条从起点到 (x , y) 点的直线，并且将起始位置设为 (x , y)。
quadraticCurveTo( cpx , cpy , x , y) : 以当前Context绘制起点为起点，(cpx,cpy)点为控制点，(x, y)点为终点的二次样条曲线路径。
bezierCurveTo( cpx1 , cpy1 , cpx2 , cpy2 , x , y); ： 以当前Context绘制起点为起点，(cpx1,cpy1)点和(cpx2, cpy2)点为两个控制点，(x, y)点为终点的贝塞尔曲线路径。
stroke() : 按照路线绘线条。
fill() : 使用当前设置好的 style 来填充路径区域
fillRect( left , top , width , height ) : 直接填充矩形
clearReck(left , top , width , height ) : 清除矩形内所有内容。
closePath(); :关闭路径绘制。
fillStyle : 填充的颜色。
lineWidth : 线条宽度。单位 px。
translate（x,y）：平移变换，原点移动到坐标（x，y）；
rotate（a）：旋转变换，旋转a度角；
scale（x，y）：伸缩变换；
save（），restore（）：提供和一个堆栈，保存和恢复绘图状态，save将当前绘图状态压入堆栈，restore出栈，恢复绘图状态；
context.save();//保存绘图状态
context.beginPath(); //开始路径绘制。
context.moveTo(50,50); // 移动到坐标 50 50 context.lineTo(150,150); // 划出轨迹到 150 150 context.stroke(); // 以线条显示轨迹 context.closePath();//关闭路径绘制。
conttext.restore();//恢复绘图状态
绘制文本
fillText(string, x, y, maxWidth) 用来绘制文本，它的四个参数分别为文本内容、起点的x坐标、y坐标、允许的最大文本宽度，以像素计（可选）。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。
绘制圆形和扇形
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
arc方法的x和y是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise(可选)表示做图时应该逆时针画（true）还是顺时针画（false）
绘制图像、画布或视频
drawImage();
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
img:规定要使用的图像、画布或视频。
sx:可选。开始剪切的 x 坐标位置。
sy:可选。开始剪切的 y 坐标位置。
s可选。被剪切图像的宽度。
sheight:可选。被剪切图像的高度。
x:在画布上放置图像的 x 坐标位置。
y:在画布上放置图像的 y 坐标位置。
可选。要使用的图像的宽度。（伸展或缩小图像）
height:可选。要使用的图像的高度。（伸展或缩小图像）