HTML5 Canvas 圆形进度条并显示数字百分比

最新推荐文章于 2021-06-30 07:30:19 发布

落花流雨

最新推荐文章于 2021-06-30 07:30:19 发布

阅读量524

点赞数 1

分类专栏： # canvas 文章标签： js

原文链接：https://www.cnblogs.com/moqiutao/p/6430079.html

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用HTML5的Canvas API创建一个圆形进度条，并实时显示数字百分比。通过JavaScript实现动态加载效果，利用strokeStyle、arc方法绘制内外两层圆环，同时展示进度数值。

摘要由CSDN通过智能技术生成

HTML5 Canvas 圆形进度条并显示数字百分比

原文链接：https://www.cnblogs.com/moqiutao/p/6430079.html
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas 圆形进度条并显示数字百分比</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            text-align: center;
            /* background-color: #000; */
        }
    </style>

</head>

<body>

    <canvas id="canvas" style="background:#000;"></canvas>
    <script>
        window.onload = function () {
            var canvas = document.getElementById('canvas'),  //获取canvas元素
                context = canvas.getContext('2d'),  //获取画图环境，指明为2d
                w = canvas.width = 500,
                h = canvas.height = 500,
                centerX = w / 2,   //Canvas中心点x轴坐标
                centerY = h / 2,  //Canvas中心点y轴坐标
                rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
                speed = 0.1; //加载的快慢就靠它了 

            /*
              绘制5像素宽的运动外圈
              save和restore可以保证样式属性只运用于该段canvas元素
            */
            function blueCircle(n) {
                context.save(); // 保存当前环境的状态
                context.strokeStyle = "#fff"; //设置描边样式
                context.lineWidth = 5; //设置线宽

                context.beginPath(); //路径开始
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                // False = 顺时针，true = 逆时针
                context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
                context.stroke(); // 绘制
                context.closePath(); // 路径结束
                context.restore(); // 返回之前保存过的路径状态和属性
            }
            /*
              绘制白色外圈
              save和restore可以保证样式属性只运用于该段canvas元素
            */
            function whiteCircle() {
                context.save();
                context.lineWidth = 5; //设置线宽
                context.strokeStyle = "red";
                context.beginPath();

                context.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }
            /*
              百分比文字绘制
              save和restore可以保证样式属性只运用于该段canvas元素
            */
            function text(n) {
                context.save();
                context.strokeStyle = "#fff"; //设置描边样式
                context.font = "40px Arial"; //设置字体大小和字体
                //绘制字体，并且指定位置
                console.log('文字', n.toFixed(0));
                context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10);
                context.stroke(); //执行绘制
                context.restore();
            }
            
            //动画循环
            (function drawFrame() {
                // window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，
                // 并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
                // 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
                window.requestAnimationFrame(drawFrame);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle(); // 静态的外圈
                text(speed); //显示的文字
                blueCircle(speed); // 运动外圈
                if (speed > 100) speed = 0;
                speed += 0.1;
            }());
        }
    </script>

</body>

</html>

落花流雨

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 圆形进度条并显示数字百分比

HTML5 Canvas 圆形进度条并显示数字百分比原文链接：https://www.cnblogs.com/moqiutao/p/6430079.html效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 Canvas 圆形进度条并显示数字百分比</title> <style>
复制链接

扫一扫

专栏目录