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

前提：

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

完成代码

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

 <!-- 放弧形的盒子 -->
    <div class="circleBox">
      <!-- 弧形 -->
      <canvas ref="tutorial" width="150" height="150"></canvas>
      <!-- 弧形中间的空白部分 -->