canvas绘制路径

canvas通过路径可以创造出复杂的形状和线条。要绘制路径首先需要调用beginPath()方法，表示要开始绘制新路径。然后调用相应的方法来实际地绘制路径。

1、arc(centerx,centery,radius,startingAngle,endingAngle,anticlosewise = false)

　　以（x，y）为圆心，半径为radius，起始角度为startingAngle，终止角度为endingAngle，顺或逆时针方向绘制一段弧度。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100,100,50,0*Math.PI,2*Math.PI);
context.strokeStyle = '#ff0000';
context.lineWidth = 3;
context.stroke();

2、arcTo(x1，y1，x2，y2，radius)

　　从上一点开始绘制一条弧线，到（x2，y2）为止，并以给定的半径radius穿过（x1，y1）。

context.beginPath();
context.moveTo(250,50);
context.arcTo(400,100,350,150,100);//由点（250,50）开始，绘制一段半径为100的弧线，弧线分别与点（250,50）、（400,100）组成的直线以及点（400，100）、点（350,150）组成的直线相切;
context.strokeStyle = "#005588";
context.lineWidth = 3;
context.stroke();

3、bezierCurveTo(c1x, c1y, c2x, c2y, x, y)

　　从上一点开始绘制一条曲线，到（x，y）为止，并且以（c1x，c1y）和（c2x，c2y）为控制点。

context.beginPath();
context.moveTo(350,50);
context.bezierCurveTo(500,10,500,200,650,100);//由点（250,50）开始经点（400,100）到点（150,100）止;
context.strokeStyle = "#005588";
context.lineWidth = 3;
context.stroke();

4、lineTo(x,y)

　　从上一点开始绘制一条直线，到（x，y）为止。

context.beginPath();
context.moveTo(50,350);
context.lineTo(200,400);
context.strokeStyle = "#005588";
context.lineWidth = 3;
context.stroke();

5、moveTo(x,y)

　　将绘图游标移至（x，y）。

context.beginPath();
context.moveTo(50,350);
context.lineTo(200,400);
context.strokeStyle = "#005588";
context.lineWidth = 3;
context.stroke();

6、quadraticCurveTo(cx,cy,x,y)

　　从上一点开始绘制一条二次曲线，以（cx，cy）为控制点，到（x，y）为止。

context.beginPath();
context.moveTo(300,250);
context.quadraticCurveTo(350,500,400,250);
context.strokeStyle = "#005588";
context.lineWidth = 3;
context.stroke();

7、rect(x,y,width,height)

　　从点（x，y）开始绘制一个矩形，宽高分别为：width、height。

context.beginPath();
context.rect(450,300,100,150);
context.strokeStyle = "#005588";
context.lineWidth = 3;
context.stroke();