页面加载圆形进度条
转载自:https://www.cnblogs.com/HDK2016/p/6345092.html
代码如下:
<html> <head> <base href="<%=basePath%>"> <title>circle</title> <style type="text/css"> #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1; } </style> </head> <body style="background:#FBFBFB;"> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> not suopport canvas </canvas> <div id="nihao"></div> <script> var text=document.getElementById("nihao"); text.innerHTML="woshiwuxinguo"; var i=0.9;//这里默认设置好评率为90% var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.lineWidth=10; ctx.strokeStyle="gray"; ctx.arc(100,75,50,0,2*Math.PI); ctx.fillStyle="#FBFBFB"; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.translate(100,75); ctx.rotate(-90*Math.PI/180); ctx.strokeStyle="#FFCFCF"; ctx.arc(0,0,50,0,2*Math.PI*i); ctx.stroke(); c.addEventListener("mouseover", function(e) { ctx.beginPath(); ctx.strokeStyle="gray"; ctx.arc(0,0,50,0,2*Math.PI); ctx.stroke(); var finish=i; var step=0; var internal=setInterval(function(e) { console.log("step:"+step); if(step<finish){ step=step+0.01; ctx.beginPath(); ctx.strokeStyle="#FFCFCF"; ctx.arc(0,0,50,0,2*Math.PI*step); ctx.stroke(); }else{ clearInterval(internal); } }, 0.5) }, true) </script> </body> </html>