贝塞尔曲线（二次，三次）

二次贝塞尔曲线

    var canvas = document.querySelector("canvas");
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(0,0);  //起始点
        ctx.quadraticCurveTo(0,500,500,500);   // 参考点 结束点
        ctx.moveTo(0,0);
        ctx.quadraticCurveTo(500,0,500,500);
        ctx.moveTo(0,500);
        ctx.quadraticCurveTo(0,0,500,0);
        ctx.moveTo(0,500);
        ctx.quadraticCurveTo(500,500,500,0);
        ctx.stroke();
    }

二次贝塞尔曲线效果

三次贝塞尔曲线

var canvas = document.querySelector("canvas");
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(0,0);  //起始点
    ctx.bezierCurveTo(0,500,500,0,500,500);   // 参考点 参考点 结束点  参考点在哪里曲线就往哪里凸
    ctx.moveTo(0,0);
    ctx.bezierCurveTo(500,0,0,500,500,500);
    ctx.moveTo(0,500);
    ctx.bezierCurveTo(0,0,500,500,500,0);
    ctx.moveTo(0,500);
    ctx.bezierCurveTo(500,500,0,0,500,0);
    ctx.stroke();
}

三次贝塞尔曲线效果