canvas绘制圆形加载进度条

说明:该文章仅供学习和参考使用,转载请注明出处
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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值