canvas绘制扇形，可以改变数量、扇形角度、扇形方向

上一篇svg绘制扇形，提到了canvas绘制，所以我这里记录一下

废话不多说，上代码：

createCanvas() {
      // 创建一个canvas标签，你也可以在html直接插入，通过document.getElementById(id)的方式获取
      this.ele = document.createElement('canvas');
      // 设置canvas标签的 id 属性
      this.ele.id = 'myCanvas'
      // 设置canvas宽、高
      this.ele.width = 100;
      this.ele.height = 100;

      // 创建一个canvas 2d画布
      const cxt = this.ele.getContext('2d');
      // 将中心点移动到50，50（圆心的位置）
      cxt.translate(50, 50);
      // 设置图形边框宽度
      cxt.lineWidth = 1;
      // 设置图形填充颜色
      cxt.fillStyle = 'rgba(26, 98, 254, 0.5)'
      // 设置边框颜色
      cxt.strokeStyle = 'rgba(26, 98, 254, 1)'
      // 这个函数名，根据项目需求命名的，大家忽略
      this.createStation(cxt, this.fanList)
},

这里fanList是绘制多少个扇形的初始化数据，我贴一下数据结构

fanList: [
    {angle: 60, dir: 0},
    {angle: 60, dir: 120},
    {angle: 60, dir: 240},
],

createStation是根据项目情况命名的，不必在意

createStation(cxt, fanList) {
   // fanList为绘制多少个扇形的基础数据
   fanList.forEach(t => {
        // 计算扇形的方向
        const dir = (t.dir - t.angle / 2) * Math.PI / 180;
        this.drawFan(cxt, t.angle, dir);
   })
},

扇形绘制方法放到一个函数drawFan方法里

drawFan(cxt, angle, dir) {
      // 将上一次的画布保存起来
      cxt.save()
      // 重新开始绘制
      cxt.beginPath();
      // 画笔移动到0，0的位置，这里相对于上面的translate（50，50）
      cxt.moveTo(0, 0);
      // 当前扇形旋转角度，是为了调整扇形的方向
      // 比如从0度开始画一个角度30度的扇形，但是这个扇形的中线指向的是15度方向
      // 若指定方向为0度，则要选择-15度
      // dir是计算后的角度
      cxt.rotate(dir)
      // 绘制弧线。0，0是圆心
      // 49是半径，加上线宽1px，正好是50
      // 第四个参数0，是起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
      // 第五个参数是结束角，以弧度计
      cxt.arc(0, 0, 49, 0, (Math.PI / 180) * angle);
      // 闭合路径
      cxt.closePath();
      // 填充图形
      cxt.fill()
      // 图形边框绘制
      cxt.stroke()
      // 恢复绘图起始点
      // 不设置restore，画笔会以上一次结束位置为0度方向开始绘制
      // 配合save使用，保证每次都是从3点钟方向计算绘图方式
      cxt.restore()
},

很简单的步骤，注释有点多，请包涵。

贴个图：

如果对你有用，还请点个赞