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>
巴特西

canvas圆形进度条（逆时针）

最新文章

热门文章
