实现一个扇形的几种方法

今天晚上面试被问到用canvas实现一个扇形，现在就来总结一下前端实现一个扇形的几种方式
源文件地址：实现一个扇形

代码实现

方法1. border-radius

HTML

  <div class="sector1"></div>

CSS

  width: 100px;
  height: 100px;
  border-top-left-radius: 100px;
  background-color: aquamarine;

方法2. canvas + arc

HTML

  <canvas id="sector2" class="sector2"></canvas>

CSS

  width: 200px;
  height: 100px;

JS

  const drawSector = function () {
    const ctx = document.querySelector('#sector2').getContext('2d');
    ctx.moveTo(50, 50);
    ctx.arc(50, 50, 50, 0, 90 * Math.PI / 180);
    ctx.lineTo(50, 50);
    ctx.stroke();
  }

  drawSector();

效果展示

标签：100px,ctx,50,几种,扇形,drawSector,height,方法
来源： https://www.cnblogs.com/xingguozhiming/p/13855278.html