canvas圆形进度条（逆时针）

最新推荐文章于 2024-04-16 16:33:00 发布

weixin_30537391

最新推荐文章于 2024-04-16 16:33:00 发布

阅读量679

点赞数

文章标签：移动开发

原文链接：http://www.cnblogs.com/muou2125/p/11189135.html

版权

<!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>

转载于:https://www.cnblogs.com/muou2125/p/11189135.html

weixin_30537391

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas圆形进度条（逆时针）

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
复制链接

扫一扫