canvas圆环进度条

最新推荐文章于 2022-08-17 15:18:49 发布

阿祥_csdn

最新推荐文章于 2022-08-17 15:18:49 发布

阅读量214

点赞数

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

本文链接：https://blog.csdn.net/u011818572/article/details/102463390

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

简述

日常工作中，有可能遇到圆环进度条的需求，此处给出圆环进度条的DEMO。

DEMO

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>draw-progress</title>
</head>
<body>
<canvas id="canvas" width="180" height="180"></canvas>
<script>
    const canvas = document.querySelector('#canvas')
    drawProgress(canvas, 60, '#2196f3', '#eef7e4', 'This is tips info')

    function drawProgress (canvasEle, percent, foregroundColor, backgroundColor, tips) {
        const context = canvasEle.getContext('2d')
        const circleLineWidth = 8 * getPixelRatio(context)
        // 高清屏绘制时是多倍像素，保持逻辑像素不变，增加物理像素，保证其在高清屏清晰显示
        canvasEle.style.width = canvasEle.width + 'px'
        canvasEle.style.height = canvasEle.height + 'px'
        canvasEle.width = canvasEle.width * getPixelRatio(context)
        canvasEle.height = canvasEle.height * getPixelRatio(context)
        const centerX = canvasEle.width / 2
        const centerY = canvasEle.height / 2
        const rad = Math.PI * 2 / 100
        let curProgress = 0

        function getPixelRatio (context) {
            const backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1
            return (window.devicePixelRatio || 1) / backingStore
        }

        function backgroundCircle () {
            context.save()
            context.beginPath()
            context.lineWidth = circleLineWidth
            // 线条只有 1/2 在圆内，因此除以2
            const radius = centerX - circleLineWidth / 2
            context.lineCap = 'round'
            context.strokeStyle = backgroundColor
            context.arc(centerX, centerY, radius, 0, Math.PI * 2, false)
            context.stroke()
            context.closePath()
            context.restore()
        }

        function foregroundCircle (progress) {
            context.save()
            context.strokeStyle = foregroundColor
            context.lineWidth = circleLineWidth
            context.lineCap = 'round'
            const radius = centerX - circleLineWidth / 2
            context.beginPath()
            context.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * rad, false)
            context.stroke()
            context.closePath()
            context.restore()
        }

        function drawText () {
            context.save()
            context.fillStyle = '#000'
            const fontSize = 18 * getPixelRatio(context)
            context.font = fontSize + 'px sans-serif'
            context.textBaseline = 'bottom'
            const textWidth = context.measureText(tips).width
            context.fillText(tips, centerX - textWidth / 2, centerY + fontSize / 2)
            context.restore()
        }

        (function drawFrame () {
            window.requestAnimationFrame(drawFrame)
            context.clearRect(0, 0, canvasEle.width, canvasEle.height)
            backgroundCircle()
            foregroundCircle(curProgress)
            drawText()
            if (curProgress >= percent) return
            curProgress += 10
        }())
    }
</script>
</body>
</html>