Canvas绘制环形进度条_canvas绘制圆环进度条

作者：凡人多烦事01 | 2024-03-17 05:42:51

踩

canvas绘制圆环进度条

给大家分享一个用Canvas写的环形进度条，实现从0%加载到75%的动画，静态效果图如下：

实现动画的代码如下：


<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas绘制环形进度条</title>
    <style>
        body {
            text-align: center;
        }
 
        #cvs {
            background: grey;
        }
    </style>
</head>
 
<body>
    <h3>Canvas绘制环形进度条</h3>
    <canvas width="800" height="600" id="cvs"></canvas>
    <script>
        var ctx = cvs.getContext("2d");// 创建画笔
        ctx.beginPath();// 开始路径
        ctx.arc(400, 300, 200, 0, 2 * Math.PI);// 创建圆弧
 
        ctx.strokeStyle = "#aaa";// 设置填充颜色
        ctx.lineWidth = 15;// 设置填充线宽
        ctx.stroke();// 开始描边
 
        var start = -Math.PI / 2;// 声明起始角
        var deg = 0;// 结束角度
 
        var timer = setInterval(function () {
            deg += 3.6;// 角度累加
 
            ctx.beginPath();// 开始新路径,必须放在定时器里面
            ctx.arc(400, 300, 200, start, start + deg * Math.PI / 180);// 创建圆弧
 
            ctx.strokeStyle = "#e4393c";// 设置填充颜色
            ctx.stroke();// 开始描边
            if (deg >= 270) {// 满足条件
                clearInterval(timer);// 清除定时器
            }
 
        }, 40);
 
        ctx.textBaseline = "middle";// 设置字体对齐基线
        ctx.font = "40px sans-serif";// 设置字体样式
        var number = 0;// 设置数字起始值
 
        var timer1 = setInterval(function () {// 设置定时器
            ctx.clearRect(350, 250, 180, 180);// 清除画布区域
            number++;// 数字累加
            var str = number + "%";// 声明字符串
            ctx.fillText(str, 375, 300);// 填充文字
            if (number >= 75) {// 满足条件
                clearInterval(timer1);// 清除定时器
            }
 
        }, 40)
 
    </script>
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/254353