百分比环形圆

  查看以前的psd，发现对应C端存在挺多的环形圆，脑子突然就断掉啦，这要咋搞！所以提前研究一下，有备无患；本身理解加个人感觉比较好使的方法如下：

方案一、  jquery实现

1. 公共html：
  <div class="cricle">
    <div class="pre_left">
        <div class="left"></div>
    </div>
    <div class="pre_right">
        <div class="right"></div>
    </div>
    <div class="mask"><span>0</span>%</div>
 </div>
2. 公共css
 <style>
    .cricle {
        width: 200px;
        height: 200px;
        background: #ccc;
        border-radius: 50%;
        position: relative;
    }

    .mask {
        width: 150px;
        height: 150px;
        background: #fff;
        border-radius: 50%;
        /* 定位内圆至中心 */
        position: absolute;
        top: 25px;
        left: 25px;
        /* 文字水平垂直居中 */
        line-height: 150px;
        text-align: center;
        color: #ccc;
        font-size: 30px;
    }
        
    .pre_left,
    .pre_right {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .left,
    .right {
        display: block;
        width: 200px;
        height: 200px;
        background: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
    }
3.开始位置：上方或下方  

    .pre_right,
    .right {
        clip: rect(0, auto, auto, 100px); //从上方开始
        // clip: rect(0, 100px, auto, 0); //从下方开始
    }

    .pre_left,
    .left {
       clip: rect(0, 100px, auto, 0); //从上方开始
      // clip: rect(0, auto, auto, 100px); //从下方开始
    }
    </style>
4. Js部分
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    function criclefn(num) {
        var degree = num * 3.6; // 将数据分为100分，通过360度均分
        if (degree > 360) degree = 360;
        if (degree < 0) degree = 0; // 数据处理为0~360

        $({
            property: 0
        }).animate({
            property: 100
        }, {
            duration: 1000,
            step: function() {
                var deg = this.property / 100 * degree;
                var percent = parseInt(this.property / 100 * num) + 1;

                if (deg <= 180) {
                    // 颜色与下方可以不同，即为超50%就会变色
                    $(".cricle").css("background-color", "red"); 
                    // 顺时针旋转
                    // $(".right").css("-webkit-transform", "rotate(" + deg + "deg)");
                    // 逆时针旋转
                     $(".right").css("-webkit-transform", "rotate(" + -deg + "deg)");
                    $(".mask span").text(percent);
                } else {
                    $(".cricle").css("background-color", "orange");
          
                    deg = deg - 180;
                    
                    $(".right").css("-webkit-transform", "rotate(" + 180 + "deg)");
                    // 顺时针旋转
                    // $(".left").css("-webkit-transform", "rotate(" + deg + "deg)");
                     // 逆时针旋转
                    $(".left").css("-webkit-transform", "rotate(" + -deg + "deg)");
                    $(".mask span").text(percent);
                }
            }
        });
    }
    $(function($) {
        criclefn(70);//这里更换百分比值
    });
</script>
    

jquery方案参考：www.cnblogs.com/dunken/p/43…

方案二、  canvas实现

1.公共html
    // 设置两个相同的canvas画圆
    <div class="circle">
        <canvas id='canvas_1' width="200" height="200"></canvas>
        <canvas id='canvas_2' width="200" height="200"></canvas>
    </div>
2.公共css
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .circle {
            width: 200px;
            height: 200px;
            margin: 2rem auto;
            position: relative;
        }

        canvas {
            display: block;
            margin: 0;
            position: absolute;
            background-color: #fff;
            left: 0;
            top: 0;
        }

        #canvas_1 {
            z-index: 1;
        }

        #canvas_2 {
            z-index: 2; //后面的canvas2会将canvas1给覆盖掉
            background: transparent;
            transform: rotate(-90deg);
        }
        </style>
 3.Js部分：
     <script>
        function inte(percent) {
            var canvas_1 = document.querySelector('#canvas_1')
            var canvas_2 = document.querySelector('#canvas_2')
            var ctx_1 = canvas_1.getContext('2d')
            var ctx_2 = canvas_2.getContext('2d')

            // 默认圆环的宽度
            ctx_1.lineWidth = 10 
            ctx_1.strokeStyle = "#ccc"
            ctx_1.beginPath()
            // false为顺时针，true为逆时针
            ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false)
            ctx_1.closePath()
            ctx_1.stroke()
            if (percent < 0 || percent > 100) {
                throw new Error('precent must be between 0 and 100')
                return
            }

            ctx_2.lineWidth = 10 // 变色圆环的颜色
            ctx_2.strokeStyle = '#f90'
            var angle = 0
            var timer;
            (function draw() {
                timer = requestAnimationFrame(draw)
                ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                ctx_2.beginPath()
                // 顺时针
                // ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false) // 顺时针
                // 逆时针
                ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, -angle * Math.PI / 180, true) 
                angle++
                var percentAge = parseInt((angle / 360) * 100)
                if (angle > (percent / 100 * 360)) {
                    percentAge = percent
                    window.cancelAnimationFrame(timer)
                }
                ctx_2.stroke()
                ctx_2.closePath()
                ctx_2.save()
                ctx_2.beginPath()
                ctx_2.rotate(90 * Math.PI / 180)
                ctx_2.rotate(-270 * Math.PI / 180)
                ctx_2.font = '30px Arial'
                ctx_2.fillStyle = 'red'
                var text = percentAge + '%'
                ctx_2.fillText(text, 80, -90)
                ctx_2.closePath()
                ctx_2.restore()
            })()
        }
        window.onload = inte(60)
    </script>
    

canvas实现参考：blog.csdn.net/yusirxiaer/…