canvas繪制圓弧

canvas繪制圓弧

1. 方法

   anticlockwise為true表示逆時針，默認為順時針
   角度都傳的是弧度（弧度 = (Math.PI/180)*角度）
   arc(x, y, radius, startAngle, endAngle, anticlockwise) 
   arcTo(x1, y1, x2, y2, radius)
   

2. 畫實心圓弧

   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   
   ctx.beginPath();
   ctx.arc(200, 200, 50, 0, (Math.PI/180)*90, false);
   ctx.fill();
   

3. 畫空心圓弧

   ctx.beginPath();
   ctx.arc(200, 200, 50, 0, (Math.PI/180)*90, true);
   ctx.stroke();
   

4. 畫兩條交線的圓角

   ctx.beginPath();
   ctx.moveTo(200, 100);
   ctx.lineTo(200, 200);
   ctx.arcTo(200, 230, 230, 230, 30);
   ctx.lineTo(300, 230);
   ctx.stroke();