canvas绘制环形进度条

最新推荐文章于 2023-11-03 00:30:00 发布

feral_coder

最新推荐文章于 2023-11-03 00:30:00 发布

阅读量509

点赞数

分类专栏：前端文章标签： canvas 环形进度条

本文链接：https://blog.csdn.net/feral_coder/article/details/87342955

版权

前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

效果如下

分析：将进度条分为两个部分，背景环与实体环，实体环包括中间文字，因此使用两个画布来实现。

代码如下：

<!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 {
                padding: 0;
                margin: 0;
            }
            .box {
                position: relative;
                width: 200;
                height: 200;
            }
            .bc,
            .pc {
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <script>
            const bc = document.createElement('canvas')
            const pc = document.createElement('canvas')
            const box = document.querySelector('.box')
            const WIDTH = 200
            const HEIGHT = 200
            const LINE_WIDTH = 10
            bc.setAttribute('class', 'bg')
            pc.setAttribute('class', 'pc')
            bc.width = pc.width = WIDTH
            bc.height = pc.height = HEIGHT
            box.appendChild(bc)
            box.appendChild(pc)
            let bctx = bc.getContext('2d')
            let pctx = pc.getContext('2d')
            bctx.lineWidth = pctx.lineWidth = LINE_WIDTH
            bctx.strokeStyle = '#ebebeb'
            pctx.strokeStyle = 'red'
            pctx.lineCap = 'round'
            pctx.font = '50px Arial'
            pctx.textAlign = 'center'
            pctx.textBaseline = 'middle'
            pctx.fillStyle = 'gray'
            bctx.beginPath()
            bctx.arc(
                100,
                100,
                WIDTH / 2 - LINE_WIDTH / 2,
                0,
                Math.PI * 2,
                false
            )
            bctx.stroke()
            bctx.closePath()
            let angle = 0
            function draw() {
                pctx.clearRect(0, 0, 200, 200)
                pctx.beginPath()
                pctx.arc(
                    100,
                    100,
                    WIDTH / 2 - LINE_WIDTH / 2,
                    0,
                    (Math.PI * angle * 2) / 100,
                    false
                )
                pctx.stroke()
                pctx.closePath()
                pctx.beginPath()
                pctx.fillText(angle + '%', 100, 100)
                if (angle < 80) {
                    window.requestAnimationFrame(draw)
                }
                angle++
            }

            window.requestAnimationFrame(draw)
        </script>
    </body>
</html>

feral_coder

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制环形进度条

效果如下分析：将进度条分为两个部分，背景环与实体环，实体环包括中间文字，因此使用两个画布来实现。代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport&
复制链接

扫一扫

专栏目录