Canvas 精度条 demo
帮问答模块一哥们写demo
效果图如下:
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style type="text/css"> *{padding:0px; margin:0px;} html{height:100%;} body{height:100%;} #shoot{width:100%; height:100%; background:#FFC; text-align:center; line-height:60px;} </style> <script type="text/javascript"> var c; var cxt; var loadresult=-1; var loadtext="Loading..."; var loadValue=0; var temp=false; function demo(){ c=document.getElementById("myCanvas"); cxt=c.getContext("2d"); cxt.lineWidth=1; cxt.fillStyle="#666666"; cxt.strokeStyle="black"; cxt.beginPath(); cxt.arc(100,100,50,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.fillStyle="#FFFFFF"; cxt.beginPath(); cxt.arc(100,100,28,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); cxt.fillStyle="black"; cxt.fillText(loadtext,77,100); cxt.save(); } function show() { demo(); } function loadfun() { window.setInterval("changeText()",200) } function changeText() { cxt.clearRect(85,102,20,15); loadValue+=1; loadtext=loadValue+"%"; cxt.fillText(loadtext,90,112); loadresult+=4; cxt.beginPath(); cxt.strokeStyle = "black"; cxt.lineWidth = 20; /** * context.arc(x, y, radius, startAngle, endAngle, anticlockwise) * 画圆弧,可以是整个弧,也可以是一部分 * @param: x 圆弧的中心坐标 * @param: y 圆弧的中心坐标 * @param: radius 圆弧的半径 * @param: startAngle 圆弧的起始角度 * @param: endAngle 圆弧的结束角度 * @param: anticlockwise 是否为《逆》时针方向 * * 其中角度是沿着x轴方向为0或360度,x轴的反向为180度 * y轴的反向为90度,y轴方向为270度 */ cxt.arc(100, 100, 38, (Math.PI / 180) * loadresult, (Math.PI / 180) * 360, true); cxt.stroke(); cxt.closePath(); } </script> </head> <body onLoad="show()"> <input type="button" value="Loading..." onClick="loadfun()"/> <div id="shoot"> <canvas id="myCanvas" width="1400px" height="800px"> 抱歉!您的浏览器不支持html5的canvasAPI,请更换浏览器查看! </canvas> </div> </body> </html>
相关推荐
sucheng 2020-04-29
choupiaoyi 2020-01-23
redis 2016-11-17
codable 2018-12-21
luojinbai 2017-03-28
feinifi 2018-06-26
芋道源码 2015-11-25
hushhw 2015-11-23
mjperhuo 2011-04-13
zhangmingming 2013-07-11
安防监控ezhf 2019-06-21
qiuzhuoxian 2012-09-01