canvas画的进度条，谁会？帮忙画个。

Question

canvas画的进度条，谁会？帮忙画个（如下图所示）。 :arrow:

[img]http://dl.iteye.com/upload/attachment/0077/8503/99fb0983-ef48-3f16-ad21-e3eaccf14943.bmp[/img]

Answer 1

发代码吧：
[code="html"]<!DOCTYPE>

无标题文档 *{padding:0px; margin:0px;} html{height:100%;} body{height:100%;} #shoot{width:100%; height:100%; background:#FFC; text-align:center; line-height:60px;} 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(); }

抱歉！您的浏览器不支持html5的canvasAPI，请更换浏览器查看！