canvas实现简易的圆环进度条效果

2019-11-19 17:23:46

字体：大中小

来源：转载

供稿：网友

效果图：

代码如下：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> canvas{  border: 1px solid #1F232A; } .div{  width: 400px;  height: 50px; } input,button{  text-align: center;  font-size: 20px; } </style> <body> <canvas id="main" width="450" height="300"></canvas> <div class="div"> 进度：<input id="num" type="number" value="100" max="100"/> <button id="makeSure">确定</button> </div> </body> <script type="text/javascript"> var makeSure=document.getElementById("makeSure"); makeSure.onclick=function(){  var ctx=document.getElementById("main").getContext("2d");  ctx.clearRect(0,0,450,300);  var num=parseInt(document.getElementById("num").value)+1;  if(num<=101){  for (var x=0;x<num;x++) {  (function(x){     setTimeout(function(){      ctx.beginPath()      ctx.lineWidth=10;   ctx.strokeStyle='orange';   ctx.arc(200, 200, 50, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);     ctx.stroke();      ctx.clearRect(390,25,50,50);      ctx.clearRect(175,175,55,55)       ctx.fillStyle = 'orange';   ctx.fillRect(10+x*3.5,30,3.5,40);   ctx.font="20px Arial";   ctx.fillText(x+"%",390,58)   ctx.fillText(x+"%",175,208)     },x*30);    })(x);  }  }else{  alert("请输入0-100之间的数字")  } } makeSure.click(); </script></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：原生js实现鼠标跟随效果

下一篇：JS实现的tab切换选项卡效果示例