1、首先看看繪制曲線和繪制弧的區別
arc()是畫一個標准的圓弧。
arcTo() 方法在畫布上創建介於兩個切線之間的弧/曲線。
官方解釋是這樣的
(x1,y1)是弧的起始點
(x2,y2)是弧的終止點
radius是弧的半徑
但是我覺得這樣解釋更通俗一點
(x0,y0)是上一個線段的結束點或者moveTo的點，和(x1,y1)與(x2,y2)三個點形成一個折線，從(x0,y0)開始畫弧，radius是半徑，弧結束於弧與(x1,y1)和(x2,y2)兩點之間線段的切點。
注意弧起始的不一定是切點，結束的時候一定是切點。
cxt.beginPath(); cxt.moveTo( x0 , y0 ); cxt.arcTo( x1 , y1 , x2 , y2 ,R); cxt.lineWidth = 6 ; cxt.strokeStyle = "red"; cxt.stroke();
2、貝塞爾曲線的繪制（二次和三次）
①二次貝塞爾曲線和arcTo很像，(x0,y0)就是這個曲線的起始點，(x2,y2)就是這個曲線的終止點，這個弧線不是標准的圓弧，曲線扭曲成什么樣，由控制點(x1,y1)決定。
使用方法和arcTo一樣
cxt.moveTo( x0 , y0 );
cxt.quadraticCurveTo( x1 , y1 , x2 , y2);
下面是繪制一個月亮的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="800" height="800" style="display:block;border:1px solid #aaa;margin:50px auto;">
如果瀏覽器不能正常顯示，請更換支持canvas的瀏覽器
</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
fillMoon(context , 2 ,400 ,400 ,300 ,0);
}
//d是控制點的橫坐標值
function fillMoon( cxt , d , x , y , R , rot ,/*optional*/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();
}
function dis( x1 , y1 , x2 , y2){
return Math.sqrt( (x1-x2)*(x1-x2) +(y1-y2)*(y1-y2));
}
</script>
</body>
</html>
②三次貝塞爾曲線比二次貝塞爾曲線多了一個控制點，可以繪制更靈活的曲線，比如波浪線，花瓣形狀的曲線。
使用方法
cxt.moveTo( x0 , y0 );
cxt.bezierCurveTo( x1 , y1 ,x2 , y2 ,x3 , y3);
實際上還有很多繪制曲線的數學方式，但是canvas只提供了arc()、arcTo()、quadraticCurveTo()和bezierCurveTo()這四種方式，同和曲線和線段的結合，能繪制出大部分圖形來。