首页 > 代码库 > 环形进度条
环形进度条
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Canvas</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="fragment" content="!"/> <script src="http://www.mamicode.com/js/underscore.js"></script> <script src="http://www.mamicode.com/js/jquery.min.js"></script> <style> p{ padding: 0; margin: 0; } #myCanvas{ border: 1px solid #d6d6d6; position: absolute; left: 0; top: 0; z-index: 1; } #myCanvas2{ border: 1px solid #d6d6d6; position: absolute; left: 0; top: 0; z-index: 2; opacity: 0.1; }</style></head><body> <canvas id="myCanvas" width="200" height="200"></canvas> <canvas id="myCanvas2" width="200" height="200"></canvas> <script> var c2 = document.getElementById("myCanvas2"); var ctx2 = c2.getContext("2d"); ctx2.beginPath(); ctx2.lineWidth = 10; ctx2.strokeStyle ="rgb(0,0,0)"; ctx2.lineCap ="round"; ctx2.arc(100,100,80,0.75*Math.PI,0.25*Math.PI); ctx2.stroke(); ctx2.closePath(); var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var endPoint = 0.75*Math.PI; var color = "rgb(143,193,31)"; var animate1 =function(iTarget){ iTarget = iTarget * 1.5*Math.PI + 0.75 *Math.PI; var timer = setInterval(function(){ ctx.beginPath(); ctx.lineWidth= 10; ctx.clearRect(0,0,200,200); ctx.strokeStyle = color; ctx.shadowBlur=2; ctx.shadowColor=color; ctx.lineCap ="round"; console.log(iTarget/Math.PI); if(iTarget > endPoint){ endPoint += 0.01 * 1.5* Math.PI; if(endPoint > 1.5 *Math.PI && endPoint < 1.95 *Math.PI){ color = "#fbed00"; } else if(endPoint > 1.95 *Math.PI){ color = "#ff0000"; } } else{ endPoint =iTarget; clearInterval(timer); } ctx.arc(100,100,80,0.75*Math.PI,endPoint); ctx.stroke(); ctx.closePath(); },10); }; </script></body></html>
环形进度条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。