點評：arc,arcTo以及quadraticCurveTo.他們都有一個共同點，就是他們畫的曲線都只能偏向一邊,今天講的bezierCurveTo與他們最大的不同點就是有兩個控制點，即可以畫出S形的曲線了,感興趣的朋友可以了解下哦

復制代碼

var x1=450, //控制點1的x坐標
y1 = 300, //控制點1的y
x2 = 450, //控制點2的x
y2 = 500,//控制點2的y
x = 300, //終點x
y = 500;//終點y
ctx.moveTo(300,300);//起點
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();
//開始畫輔助線
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1;
// 連接起點和控制點1
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 連接終點和控制點2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// 連接起點與終點（基線）
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();

復制代碼

var x1 = 150;
...