canvas画任意角度的扇形，弧形，及扇形弧形填纯色渐变色

前提：

接到一个需求，某个事项的完成率用环形表示，小于100%时，每隔25%为一种纯色填充，完成率100%的时候，整个环形为渐变色填充。开始是用的echarts,知道canvas是画图工具，但是之前没看过，也懒得学了。但是echarts对环形的填充只能是不同的纯色，没有找到渐变色填充的选项，产品经理不是很满意，今天就用canvas试了试。canvas，真好用哦。。。

完成代码

这是一份较粗略的代码，代码如下：
HTML代码：

 
    <div class="circleBox">
      
      <canvas ref="tutorial" width="150" height="150">canvas>
      
      <div class="circleText">
      div>
    div>

JavaScript代码：

  draw () {
      // 获取canvas DOM节点
      var canvas = this.$refs.tutorial
      if(canvas.getContext) {
        // 获取绘画上下文
        var ctx = canvas.getContext("2d")
        // 设置渐变背景
        var lineargradient = ctx.createLinearGradient(0, 0, 150, 150)
        lineargradient.addColorStop(0, 'white')
        lineargradient.addColorStop(1, 'black')
        // 开始绘画
        ctx.beginPath()
        // 画圆的函数，四个参数分别为x, y（坐标）, radius（半径）, angle（环形半径）, direction（环形方向，顺时针或者逆时针）
        // angle是我定义的一个变量，控制角度用的。一个完整的圆是Math.PI*2，angle把2均分之后的对应值
        ctx.arc(75, 75, 50, 0, Math.PI*this.angle*0.1, false)
        // 移动笔触到圆心
        ctx.lineTo(75, 75)
        // 闭合路径
        ctx.closePath()
        // 根据弧度选择填色色彩
        if(this.angle>0 && this.angle<=9) {
          ctx.fillStyle = lineargradient
        } else if(this.angle > 9 && this.angle <= 15) {
          ctx.fillStyle = 'green'
        } else if (this.angle >= 20) {
            ctx.fillStyle = 'orange'
        } else {
          ctx.fillStyle = 'blue'
        }
      // 填色
        ctx.fill()
      }

.circleBox{
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto
}

.circleText{
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  background-color: #fff;
}

效果图（60deg）：

效果图295deg：

你看，扇形已经出来了，如果想要弧形的话，之前上面的代码有一个类名为circleText的div，它是放在扇形中心的一个圆形白色遮罩，填上它就是弧形了，可以按需求添加删除，添加中间的白色遮罩后效果如图：

原理解析：

画任意角度的扇形弧形的代码已经完全贴完了，这是在Vue中用到的，其他框架或者没有框架，有些地方可能稍后变化，但原理是一样的。

下面稍微讲一些canvas画图的原理，免得以后自己看的时候忘了，有需要的同学也可以顺便看一下。

canvas元素

<canvas ref="tutorial" width="150" height="150">canvas>

如上面的代码所示，这就是一个canvas元素，是不是觉得和图片一样一样的，除了少了一个src元素。通俗来讲，canvas就是html中的一个普通标签，我们可以通过canvas DOM元素，进行绘图，canvas对象内置了很多函数，会帮我们来完成我们的绘图工作，比如矩形、直线、曲线和贝赛尔曲线，如果有耐心，能画出很复杂的图形。不过今天这里只讲一些很基础的东西。

栅格

在画图前，我们需要了解一下栅格以及坐标空间。在第一段代码中，我们给canvas一个150*150的宽高，如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。在课程的最后我们会平移原点到不同的坐标上，旋转网格以及缩放。现在我们还是使用原来的设置。

还是喜欢先上代码，首先把canvas DOM对象获取到，下面这段代码也可以说是canvas画图的一个基本骨架：

var canvas = this.$refs.tutorial // 用的Vue，所以获取DOM节点使用的是$refs
var ctx = canvas.getContext("2d")

矩形

矩形是canvas内置函数，直接调用就可以了：

ctx.fillRect(20, 20, 100, 100)
ctx.fillStyle = 'green'

同一个canvas对象里可以画很多个矩形，由这个可以延展到，在canvas里面，我们是通过图形组合，来实现复杂的图形的

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);

此外，canvas还能绘制路径、曲线，给你传送门吧，我再写下去，就跟照搬教程一样了。
Canvas-API

写的不对不好不理解的，请告诉我一下，麻烦了，谢谢