Canvas 实现圆形进度条并随着滑块改变而改变数字百分比

最新推荐文章于 2024-08-19 13:13:12 发布

本地是好的

最新推荐文章于 2024-08-19 13:13:12 发布

阅读量773

点赞数

分类专栏： H5 文章标签： canvas进度条

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现效果如图

在这里插入图片描述

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

<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>Canvas 实现圆形进度条并显示数字百分比</title>
    <style>

    </style>
</head>

<body>
    <canvas id="va" width="400" height="400" style="background:#000;"></canvas>
    <input type="range" min="0" max="100" value="0" id="range">
    <script>
        var cvs = document.getElementById('va');
        var ctx = cvs.getContext('2d');
        ctxX = cvs.width / 2;
        ctxY = cvs.height / 2;//设置中心点
        rad = Math.PI * 2 / 100;//将360度分成100份
        speed = 0;//加载速度
        // 绘制动态外圈
        function wCircle(n) {
            ctx.save();
            ctx.strokeStyle = "orangered";//设置线的颜色
            ctx.lineWidth = 5;
            ctx.beginPath();//开始路径
            ctx.arc(ctxX, ctxY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
            ctx.stroke();//绘制
            ctx.closePath();//路径结束
            ctx.restore();

        }
        // 绘制底圈
        function dCircle() {
            ctx.save();
            ctx.strokeStyle = "#fff";//设置线的颜色
            ctx.lineWidth = 2;
            ctx.beginPath();//开始路径
            ctx.arc(ctxX, ctxY, 100, 0, Math.PI * 2, false);
            ctx.stroke();//绘制
            ctx.closePath();//路径结束
            ctx.restore();
        }
        // 百分比
        function text(n) {
            ctx.save();
            // ctx.strokeStyle = "orangered";
            ctx.font = "40px Arial";
            ctx.fillStyle = "orangered";
            ctx.fillText(n + "%", ctxX - 35, ctxY + 10);
            // ctx.fill();
            ctx.restore();
        }
        var range = document.getElementById('range');


        // 动画循环
        (function draw() {
            // 初始化
            window.requestAnimationFrame(draw);
            ctx.clearRect(0, 0, cvs.width, cvs.height);
            dCircle();
            text(speed);
            wCircle(speed);
            // 当滑块值改变
            range.oninput = function () {
                speed = range.value;
                console.log(speed);
                window.requestAnimationFrame(draw);
                ctx.clearRect(0, 0, cvs.width, cvs.height);
                dCircle();
                text(speed);
                wCircle(speed);
            }

        })();
    </script>
</body>

</html>