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//终点

)