亲宝软件园·资讯

展开

js圆形加载进度条

Yesir_mao 人气:2

1.需求:通过canvas绘制一个圆形的进度条

2.实现思路:

2.1 绘制灰色底框

2.2 创建变量保存结束角度值和加载进度值

2.3 创建定时绘制进度条

2.3.1 修改结束角度
2.3.2 开始新路径绘制
2.3.3 绘制加载圆环

3.实现过程如下:

css样式设置

body {
            text-align: center;
        }

        canvas {
            background: #ffffff;
        }

4.html如下:

<canvas id="circle" width="500" height="400"></canvas>

5.js实现如下:

var circle = document.getElementById("circle");
        var ctx = circle.getContext("2d");
        //结束角度
        var end = -90;
        // 创建变量,进度值1%
        var load = 0;
        // 创建定时器,绘制进度条
        var timer = setInterval(function () {
            //每次加载前清除画布
            ctx.clearRect(0, 0, 500, 400);
            ctx.beginPath();
            // 灰色底框
            ctx.strokeStyle = "#eee"; //底框的背景颜色
            ctx.lineWidth = 10; //底框的宽度
            //底框显示的位置想x,y,r,start,end
            ctx.arc(250, 200, 100, 0, 2 * Math.PI);  
            ctx.stroke(); //绘制底框,空心圆
            // 修改结束角度
            end += 3.6;
            // 开始新的路径
            ctx.beginPath();
            // 绘制新的圆环
            ctx.strokeStyle = "lightgreen";
            ctx.lineWidth = 10;
            //从顶点位置开始
            ctx.arc(250, 200, 100, -90 * Math.PI / 180, end * Math.PI / 180);
            ctx.stroke();
            // 设置中间的文字字体和大小
            ctx.font = "18px SimHei";
            load++;
            // 设置图形文字
            ctx.fillText("已加载完成:" + load + "%", 180, 208);
            if (load == 100) {
                clearInterval(timer);
            }
        }, 200);

6.实现效果如下:

加载全部内容

相关教程
猜你喜欢
用户评论