使用canvas实现h5圆环加载百分比进度条

最新推荐文章于 2025-06-15 13:38:14 发布

原创

最新推荐文章于 2025-06-15 13:38:14 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#百分比加载 #canvas #进度条 #js #圆环加载

本文详细介绍了一种使用JavaScript和HTML5 Canvas实现的百分比加载动画的方法。通过自定义DrawLoad类，动态更新加载进度，结合动画循环绘制背景圈、当前百分比圈及文字，实现了流畅的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
js文件

/**
 * 百分比加载 
 * const dl = new DrawLoad('canvas');   
 * canvas为canvas元素id
 * dl.setPer(1) // 设置百分比为1
 * dl.clearAnimation() //清除动画刷新
 * 元素示例 <canvas id="canvas" width="150" height="150"></canvas>
 */
class DrawLoad {
   
   
    constructor(canvas) {
   
   
        this.per = 0;
        this.canvas = document.getElementById(canvas);  //获取canvas元素
        this.context = this.canvas.getContext('2d');  //获取画图环境，指明为2d
        this.centerX = this.canvas.width/2;   //Canvas中心点x轴坐标
        this.centerY = this.canvas.height/2;  //Canvas中心点y轴坐标
        this.rad = Math.PI*2/100; //将360度分成100份，那么每一份就是this.rad度
        this.drawFrame();
    }
    /**
     * 设置百分比
     * @param 整数 0-100
     */
    setPer(per) {
   
   
        this.per = per;
    }
    // 清除动画刷新
    clearAnimation() {
   
   
        window.cancelAnimationFrame(this.raf_id);
    }

    //绘制当前百分比圈