HTML 圆形进度条

最新推荐文章于 2024-08-16 08:26:11 发布

段旭文

最新推荐文章于 2024-08-16 08:26:11 发布

阅读量2.4k

点赞数 2

分类专栏： HTML 文章标签： HTML 圆形进度条 JS 样式

本文链接：https://blog.csdn.net/qq_33538554/article/details/87005198

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果截图：

Html页：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>圆形进度条</title>
<link href="ProgressBarStyle.css" rel="stylesheet" />
</head>
<body>
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>
    <script src="ProgressBarScript.js"></script>
</body>
</html>

css样式：

.canvas {
background:#343232;
}

JS逻辑:
window.onload = function () {
            var canvas = document.getElementById('canvas'), //获取canvas元素
                context = canvas.getContext('2d'), //获取画图环境，指明为2d
                centerX = canvas.width / 2,   //Canvas中心点x轴坐标
                centerY = canvas.height / 2, //Canvas中心点y轴坐标
                rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
                speed = 0.1; //加载的快慢就靠它了
            //绘制蓝色外圈
            function blueCircle(n) {
                context.save();
                context.strokeStyle = "#d41616"; //设置描边样式
                context.lineWidth = 3; //设置线宽
                context.beginPath(); //路径开始
                context.arc(centerX, centerY, 50, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }
            //绘制白色外圈
            function whiteCircle() {
                context.save();
                context.beginPath();
                context.strokeStyle = "white";
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //百分比文字绘制
            function text(n) {
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.strokeStyle = "#fff"; //设置描边样式
                context.font = "20px Arial"; //设置字体大小和字体
                context.textAlign = 'center';//字体水平居中
                context.textBaseline = 'middle';//字体垂直居中
                //绘制字体，并且指定位置
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);
                context.stroke(); //执行绘制
                context.restore();
            }
            //循环获取
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                blueCircle(speed);
                if (speed < 100) {
                    //0.1可从后台获取值
                    speed += 0.1;
                }
            }());
        }