canvas圆形进度条（逆时针） 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>circle</title>
</head>
<body>
    <canvas id='myCanvas' width="292" height="292"></canvas>

    <script>
        // 绘制圆
        function drawCircleFn(totalReward) {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            ctx.lineWidth = 24;
            ctx.lineCap = 'round';
            if(totalReward){
                ctx.strokeStyle = '#0FCC9E';
                circleAnimateFn(ctx);
            }else{
                ctx.strokeStyle = '#f2f2f2';
                circleNoAnimateFn(ctx);
            }
        }

        // 绘制灰色圆
        function circleNoAnimateFn(ctx) {
            let startAngle = 3 / 2 * Math.PI; //开始位置弧度
            let percentage = 10;
            let diffAngle = percentage / 100 * Math.PI * 2; //完成进度弧度值
            ctx.beginPath();
            ctx.arc(146, 146, 132, startAngle, diffAngle + startAngle, true);
            ctx.stroke();
        }

        // 绘制动画圆
        function circleAnimateFn(ctx) {
            let startAngle = 3 / 2 * Math.PI; //开始位置弧度
            let percentage = 100;  //完成进度值 100 - 10
            let endcentage = 10;
            let diffAngle = percentage / 100 * Math.PI * 2; //完成进度弧度值
            let intervalFn = setInterval(function(){
                if(percentage <= endcentage){
                    clearInterval(intervalFn);
                    percentage = endcentage;
                }else{
                    percentage = percentage - 5;
                    diffAngle = percentage / 100 * Math.PI * 2;
                    ctx.beginPath();
                    ctx.arc(146, 146, 132, startAngle, diffAngle + startAngle, true);
                    ctx.stroke();
                }
            }, 15)
        }

        drawCircleFn();
    </script>
</body>
</html>

 

posted @ 2019-07-15 15:24  青芒灬  阅读(914)  评论(1)    收藏  举报