原生JS环形进度条

Html

Css

var bg = document.getElementById('canvas1');
 var ctx = bg.getContext('2d');
 ctx.beginPath();
 ctx.lineWidth = 10;
 ctx.strokeStyle = '#e5e5e5';
 var grd = ctx.createLinearGradient(0, 0, 100, 0); //从左到右
 grd.addColorStop(0, "#e5e5e5"); //起始颜色
 grd.addColorStop(1, "#e5e5e5"); //终点颜色
 ctx.fillStyle = grd;
 ctx.arc(72, 56, 36, 1 * Math.PI, 2 * Math.PI, false);
 ctx.stroke();

var bg2 = document.getElementById('canvas3');
 var ctx2 = bg2.getContext('2d');
 ctx2.beginPath();
 ctx2.lineWidth = 10;
 ctx2.strokeStyle = '#e5e5e5';
 var grd2 = ctx2.createLinearGradient(0, 0, 100, 0); //从左到右
 grd2.addColorStop(0, "#e5e5e5"); //起始颜色
 grd2.addColorStop(1, "#e5e5e5"); //终点颜色
 ctx2.fillStyle = grd2;
 ctx2.arc(36, 36, 30, 0 * Math.PI, 2 * Math.PI, false);
 ctx2.stroke();

ctx2.fillStyle = '#8b4e9e';
 ctx2.font = 'normal 16px 微软雅黑';
 ctx2.textBaseline = "middle"; //竖直对齐
 ctx2.textAlign = "center"; //水平对齐　
 ctx2.fillText("95%", 36, 36, 50); //绘制文字

var mmp2 = 1;
 var end2 = 2.95
 var move2 = function() {
     ctx2.beginPath();
     ctx2.lineWidth = 10;
     ctx2.strokeStyle = '#000';
     var grd2 = ctx2.createLinearGradient(0, 0, 100, 0); //从左到右
     grd2.addColorStop(0, "#7c71b6"); //起始颜色
     grd2.addColorStop(1, "#8b4e9e"); //终点颜色
     ctx2.strokeStyle = grd2;
     // ctx2.fillRect(0,0,400,400)

ctx2.arc(36, 36, 30, 1 * Math.PI, mmp2 * Math.PI, false);
     ctx2.stroke();
     if (end2 != 1) {
         mmp2 += 0.01
         if (mmp2 < end2) {
             setTimeout(move2, 10)
         }
     }
 }
 move2()

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生JS环形进度条



代码描述：画布 canvas 画环形，弧形颜色渐变过渡动画进度条

代码注释整理的不全，有部分代码建议百度菜鸟 wscschool 无需插件简单易懂直接ctrl c+v

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

喧泫

相关代码

原生JS环形进度条

最新