实现环形进度条

最新推荐文章于 2024-08-28 16:42:03 发布

西米幺幺

最新推荐文章于 2024-08-28 16:42:03 发布

阅读量265

点赞数

分类专栏：笔记整理

本文链接：https://blog.csdn.net/qq_40352733/article/details/118858369

版权

本文介绍了两种实现环形进度条的方法，包括利用CSS3技术和Canvas进行绘制。通过CSS3的方式，可以方便地实现环形进度条的动画效果；而使用Canvas则能实现更复杂和自定义的视觉效果。

摘要由CSDN通过智能技术生成

css3方式

const Circle = () => {
    const [step, setStep] = React.useState(0)

    const handleAdd = () => {
        let num =  (step + 10) * 3.6
        const leftEl = document.getElementsByClassName('left')
        const rightEl = document.getElementsByClassName('right')
        if(num < 180) {
            rightEl[0].style.transform = 'rotate(' + num + 'deg)'
        } else {
            rightEl[0].style.transform = 'rotate(180deg)'
            leftEl[0].style.transform = 'rotate(' + (num-180) + 'deg)'
        }
        setStep(pre => pre + 10)
    }
    return (
        <div className={styles.circle}>
            <div className="pie-right">
                <div className="right"></div>
            </div>
            <div className="pie-left