绘制矩形
fillRect(x,y,width,height)
绘制一个填充的矩形
strokeRect(x,y,width,height)
绘制一个矩形的边框
clearRect(x,y,width,height)
清除制定矩形区域，让清除部分完全透明
上述中参数（x,y）指定了在画布上矩形的左上角（相对于原点）的坐标，width和height设置矩形的尺寸
绘制路径
1.首先，你需要创建路径起始点。
2.然后你使用画图命令去画出路径。
3.之后你把路径封闭。
4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论最后的是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
moveTo(x,y)
将笔触移动到指定的坐标x以及y上。
lineTo(x, y)
绘制一条从当前位置到指定x以及y位置的直线。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
fill()
通过填充路径的内容区域生成实心的图形。
绘制圆或圆弧
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
arcTo(x1, y1, x2, y2, radius) // 用的不多
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
二次贝塞尔曲线及三次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。
Path2D对象
Path2D()
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。
newPath2D();// 空的Path对象
newPath2D(path);// 克隆Path对象
newPath2D(d);// 从SVG建立Path对象
Path2D.addPath(path [, transform])
添加了一条路径到当前路径（可能添加了一个变换矩阵）。
示例
function draw(){
var canvas = document.getElementById("canvas");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
var rectangle = new Path2D(); // 创建Path2D对象
rectangle.rect(10,10,50,50);
var circle= new Path2D(); // 创建Path2D对象
circle.moveTo(125,35);
circle.arc(100,35,25,0,2*Math.PI)
ctx.stroke(rectangle);
ctx.fill(circle);
}
}