Canvas曲线绘制

context.arc(
    x,y,r,
    startingAngle,endingAngle,
    anticlockwise//true or false
)

moveTo(x,y)
context.arcTo(
    x1,y1,x2,y2,
    r
)
贝塞尔二次曲线
moveTo(x,y)//起点
quadraticCurveTo(
    x1,y1,//控制点
    x2,y2//终点

)

function drawMoon(cxt,d,x,y,R,rot,fillColor){
    cxt.save();
    cxt.translate(x,y);
    cxt.rotate(rot*Math.PI/180);
    cxt.scale(R,R);
    pathMoon(cxt,d);
    cxt.fillStyle=fillColor||"#fb5";
    cxt.fill();
    cxt.restore();
}
function pathMoon(cxt,d){
    cxt.beginPath();
    cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
    cxt.moveTo(0,-1);
    cxt.quadraticCurveTo(1.2,0,0,1);
    cxt.closePath();
}

贝塞尔三次曲线
moveTo(x,y)//起点
bezierCurveTo(
    x1,y1,//控制点
    x2,y2,//控制点
    x3,y3//终点
)