用canvas画 环状图

上面是绘制的结果, 下面贴上源代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #cvs {
            display: block;
            border: 1px solid #000;
            margin: 10px auto;
        }
    </style>
    <title>CANVAS</title>
</head>

<body>
    <canvas id="cvs" width="400" height="400"></canvas>

    <script>
        // 画笔工具
        const ctx = document.querySelector('#cvs').getContext('2d')
        let precent = 0

        function drawCircle(pre) {
            // 起点处画圆
            ctx.beginPath()
            ctx.moveTo(300, 200)
            ctx.arc(300, 200, 20, 0, Math.PI * 2)
            ctx.fillStyle = "#ff6700"
            ctx.fill()
            ctx.closePath()

            // 大圆环
            ctx.beginPath()
            ctx.moveTo(200, 200)
            ctx.arc(200, 200, 120, 0, 2 * Math.PI * pre / 100)
            // ctx.stroke()
            ctx.fillStyle = '#ff6700'
            ctx.fill()
            ctx.closePath()

            // 内部空心圆填充
            ctx.beginPath()
            ctx.moveTo(200, 200)
            ctx.arc(200, 200, 80, 0, 2 * Math.PI)
            ctx.fillStyle = '#fff'
            ctx.fill()
            ctx.closePath()

            // 大圆坐标
            const x = 200 + 120 * Math.cos(2 * Math.PI * pre / 100)
            const y = 200 + 120 * Math.sin(2 * Math.PI * pre / 100)
            // 小圆坐标
            const x2 = 200 + 80 * Math.cos(2 * Math.PI * pre / 100)
            const y2 = 200 + 80 * Math.sin(2 * Math.PI * pre / 100)
            // 中心坐标
            const cx = (x + x2) / 2
            const cy = (y + y2) / 2
            ctx.beginPath()
            ctx.moveTo(cx, cy)
            ctx.arc(cx, cy, 20, 0, 2 * Math.PI)
            ctx.fillStyle = "#ff6700"
            ctx.fill()
        }

        (function draw() {
            precent++
            if (precent <= 90) {
                drawCircle(precent)
                setTimeout(() => {
                    draw()
                }, 30)
            }
        })()


    </script>
</body>

</html>



 

posted @ 2021-04-16 20:40  深海里的星星i  阅读(395)  评论(0)    收藏  举报