Canvas绘制环形进度条-CFANZ编程社区

Canvas绘制环形进度条

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

Canvas绘制环形进度条_HTML

实现动画的代码如下：

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

0 条评论