canvas绘制圆弧

Posted 2021-02-08 ye-hcj

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();