任意角度弧形进度条

简述

• 绘制一个270°的弧形进度条，根据所传入的分数显示进度位置。（可根据需要调整自己的度数）

思想

• 将一个正方形分为左右两个矩形
• 左右矩形各画半圆（实际是一个圆超出部分被隐藏了）
• 左边用180°半圆，右边用90°弧形（transform：rotate（）旋转得到）--------底色拼完
• 进度条颜色初始通过旋转隐藏
• 通过计算得到相应分数的进度条旋转度数

例子参数

 可以先看文章最后的效果图，便于理解哦

• 绿色：底色
• 蓝色：左半圆进度颜色
• 枣红色：右半弧进度颜色（方便区分，实际情况应该与左半圆同色）

代码

HTML

<div class="circleProgress_wrapper">     //进度条
  <div id="score">0</div>                //分数
    <!-- 右 -->
  <div class="wrapper right">           // 矩形容器
    <div  class="circle rightbox "></div>   //进度条底色（绿色）容器
    <div class="circle rightcircl