canvas之绘制贝塞尔曲线

绘制二次贝塞尔曲线（quadraticCurveTo）

 //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    pencil.moveTo(20,40); //画笔着落在起始点

    //参数描述： 控制点x坐标、控制的y坐标； 结束点的x坐标，结束点的y坐标
    pencil.quadraticCurveTo(40,200,100,60);
    pencil.strokeStyle='green';
    pencil.stroke();

绘制三次贝塞尔曲线

三次贝塞尔曲线有两个控制点。二次贝塞尔曲线有一个控制点

 //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后，还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    pencil.moveTo(20,20); //画笔着落在起始点

    //参数描述： 第一个控制点x坐标、第一个控制的y坐标； 第二个控制点x坐标、第二个控制的y坐标； 结束点的x坐标，结束点的y坐标
    pencil.bezierCurveTo(20,100, 200,100, 200,20)
    pencil.strokeStyle='green';
    pencil.stroke();