canvas实现环形进度条-CSDN博客

<!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>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #canvas {
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400" height="400">
        您的浏览器暂不支持canvas
    </canvas>
    <script>
        window.requestAnimFrame = (function () { //浏览器的兼容设置  
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function ( /* function */ callback, /* DOMElement */ element) {
                    window.setTimeout(callback, 1000 / 60); //定义每秒执行60次动画
                };
        })();


        let canvas = document.getElementById("canvas")
        let ctx = canvas.getContext('2d')

        function createBigArc() {
            ctx.beginPath()
            ctx.arc(200, 200, 100, 0, 2 * Math.PI) //大圆的绘制
            ctx.closePath()
            ctx.fillStyle = "#f2f2f2"
            ctx.fill()
        }

        function createShadow() {
            ctx.beginPath()
            ctx.arc(200, 200, 70, 0, 2 * Math.PI, true) //中间小圆加阴影
            ctx.closePath()
            ctx.shadowBlur = 20;
            ctx.shadowColor = "#666"

            ctx.beginPath()
            ctx.arc(200, 200, 70, 0, 2 * Math.PI, true) //小圆覆盖中间不需要阴影部分
            ctx.closePath()
            ctx.fillStyle = "#fff"
            ctx.fill()
        }

        function createProgress(begin, end) {
            ctx.beginPath()
            ctx.arc(200, 200, 85, begin * Math.PI, end * Math.PI) //进度绘制
            ctx.lineWidth = 30
            ctx.shadowBlur = 10
            ctx.lineCap = "round";
            ctx.shadowColor = "#ccc"
            ctx.strokeStyle = "#87d068"
            ctx.stroke()
        }
        let begin = 1.5
        function start() {
            ctx.clearRect(0, 0, 800, 800);
            createBigArc()
            createShadow()
            createProgress(1.5, begin)
            begin = begin + 0.003
            if(begin>3.5){
                begin=1.5
            }
            window.requestAnimationFrame(start)
        }
        (function(){
            window.requestAnimationFrame(start)
        })()
    </script>
</body>

</html>
复制代码