HTML5 canvas中的路径方法
路径方法
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo(cpx,cpy,x,y) 创建二次贝塞尔曲线
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点：moveTo(20,20)
控制点：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)
cpx 贝塞尔控制点的 x 坐标
cpy 贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 创建三次方贝塞尔曲线
bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)
cp1x 第一个贝塞尔控制点的 x 坐标
cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标
cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
arc(x,y,r,sAngle,eAngle,counterclockwise) 创建弧/曲线（用于创建圆形或部分圆）
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
arcTo(x1,y1,x2,y2,r) 创建两切线之间的弧/曲线
x1 弧的起点的 x 坐标
y1 弧的起点的 y 坐标
x2 弧的终点的 x 坐标
y2 弧的终点的 y 坐标
r 弧的半径
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
<canvas id="d" width="500" height="450" style="border:1px solid #000"></canvas>
<script type="text/javascript">
var a=document.getElementById("d");
var ctx=a.getContext("2d");
ctx.beginPath(); //起始一条路径，或重置当前路径
ctx.moveTo(20,20); //把路径移动到画布中的指定点，不创建线条
ctx.lineTo(20,120); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.lineTo(90,120);
ctx.closePath(); //创建从当前点回到起始点的路径
ctx.stroke(); //绘制已定义的路径
ctx.fillStyle="green";
ctx.fill(); //填充当前绘图（路径）
ctx.beginPath();
ctx.moveTo(20,150);
ctx.quadraticCurveTo(20,250,200,150); //创建二次贝塞尔曲线
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,350)
ctx.bezierCurveTo(20,400,200,400,200,350); //创建三次方贝塞尔曲线
ctx.stroke();
ctx.beginPath();
ctx.arc(300,200,20,0,1.5*Math.PI); //创建弧/曲线（用于创建圆形或部分圆）
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,280);
ctx.lineTo(350,280);
ctx.arcTo(400,280,400,330,50); //创建两切线之间的弧/曲线
ctx.lineTo(400,380);
ctx.stroke();
ctx.rect(400,20,50,50);
if(ctx.isPointInPath(401,20)){ //如果指定的点位于当前路径中，则返回 true，否则返回 false
ctx.stroke();
}
ctx.rect(150,20,200,120);
ctx.stroke();
ctx.clip(); //从原始画布剪切任意形状和尺寸的区域
ctx.fillStyle="green";
ctx.fillRect(0,0,250,100);
</script>
