canvas實現環形進度條

時間 2019-11-05

標籤 canvas 實現環形進度简体版

原文原文鏈接

<!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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。