问题描述
canvas画的进度条，谁会？帮忙画个（如下图所示）。
解决方案
发代码吧：<!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>
解决方案二：
demojava 给力呈现 demo
解决方案三：
demojava 给力demo看图