canvas绘制曲线

代码：

/**
 * Created by Administrator on 2016/1/28.
 */
function draw (id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(100,180);
    context.lineTo(200,50);
    context.lineTo(300,200);
    context.strokeStyle = "rgba(0,0,0,0.4)"
    context.lineWidth = 2;
    context.stroke();
//  绘制辅助线
    context.beginPath();
    context.moveTo(80,120);
//    context.arcTo(150,60,180,130,50);
//    context.quadraticCurveTo(200,50,300,200);
//    context.bezierCurveTo(110,80,260,100,300,200);
    context.lineWidth = 3;
    context.strokeStyle = "rgba(255,135,0,1)";
    context.stroke();
}

绘制曲线三种方式：

　　1）使用arcTo方法：

　　　　　　格式：arcTo(x1,y1,x2,y2,radius) :两个坐标点，一个半径。

　　2）使用quadraticCurveTo方法：

　　　　　　格式：quadraticCurveTo(cpx,cpy,x,y):一个控制点，一个结束点。

　　　　　　可以用moveTo()来确定开始点。

　　　　　　不用moveTo()方法来确定开始点的话，则为当前路径的中的最后一个点。

　　　　　　

　　3）使用bezierCurveTo()方法：

　　　　　　格式：bezierCurveTo(cpx1,xpy1,cpx2,cpy2,x,y):两个控制点，一个结束点。

　　　　　　当然，可以用moveTo()确定开始点。