HTML5 - canvas : larc, quadratic & bezier

HTML

<canvas id="myCanvas" width="100" height="400"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  cxt.beginPath();
  cxt.arc(50,50,30,0,2*Math.PI,true);//正圓形
  cxt.stroke();
  
  cxt.beginPath();
  cxt.arc(50,120,30,1.2*Math.PI,1.8*Math.PI,false);//用正圓描繪出來的弧度
  cxt.strokeStyle='#f00';
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(2,180);
  cxt.quadraticCurveTo(50,100,100,180);//二維曲線
  cxt.strokeStyle='green';
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(50,250);
  cxt.bezierCurveTo(2,150,50,200,80,250);//三維曲線
  cxt.strokeStyle='blue';
  cxt.stroke();
  
});

主要使用function :

1. arc() - 用來畫正圓形或以正圓為依據的弧度，arc(正圓的中心x軸, 正圓的中心y軸, 半徑, 起始角度以三點鐘方向為0~1.9*Math.PI, 結束角度0~1.9*MathPI, true=逆時鐘 false=順時鐘)。

   

   http://www.w3school.com.cn/i/arc.gif

   
   
2. quadraticCurveTo() - 用來繪製二維曲線，需要以moveTo()為開頭，quadraticCurveTo(控制點的x座標, 控制點的y座標, 結束點的x座標, 結束點的y座標)。

   

   圖片來源：http://www.w3school.com.cn/i/quadraticcurve.gif

   
   
3. bezierCurveTo() - 用來繪製三維曲線，需要以moveTo()為開頭，bezierCurveTo(第一個控制點x座標, 第一個控制點y座標, 第二個控制點x座標, 第二個控制點y座標, 結束點的x座標, 結束點的y座標)。

   

   圖片來源：http://www.w3school.com.cn/i/beziercurve.gif

Result

JSFiddle
https://jsfiddle.net/MickeyChen/11dy3oqm/