canvas绘制扇形进度条

<!DOCTYPE HTML>
<html>
<body>

<table cellpadding=”0″ cellspacing=”0″ >
<tr>
<td id=”t_h”><canvas id=”canvasH” width=”140″ height=”140″> 您的浏览器版本太老,不支持canvas,建议升级浏览器</canvas><div style=”width:140px; height:140px; line-height:140px;background: url(http://www.eshefang.com/esf/statics/images/djs.png) center no-repeat; position:absolute; top:0; left:0; margin:9px 11px;”>24小时<{$hours}></div></td>
<td id=”t_m”><canvas id=”canvasM” width=”140″ height=”140″> 您的浏览器版本太老,不支持canvas,建议升级浏览器</canvas><div style=”width:140px; height:140px; line-height:140px;background: url(http://www.eshefang.com/esf/statics/images/djs.png) center no-repeat; position:absolute; top:0; left:0; margin:8px 177px;”>30分<{$minute}></div></td>

</tr>
</table>
<script type=”text/javascript”>
function drawBingTu(canvasid,canvascolor,x, y, r, end){

// canvasid 是canvas的ID, canvascolor 是要填充的颜色,x,y是圆心坐标,r是半径,end是结束的弧度
var c = document.getElementById(“myCanvas”);
var cxtbing = c.getContext(“2d”);
cxtbing.clearRect(0,0,x,y);
cxtbing.fillStyle = “#33AF91”;
cxtbing.beginPath();
cxtbing.arc(x, y, r, -Math.PI * 0.5, end, false);
cxtbing.lineTo(x,y);
cxtbing.lineTo(x,y-r);
//cxtbing.shadowBlur = 10; //阴影宽度
//cxtbing.shadowColor = “#f0f”; //阴影颜色
cxtbing.fill();
cxtbing.closePath();
}

function loadjindu (canvasID,enddianXs,canvascolor){
var i = -0.5;
var enddianXs=0.5;//结束弧度的系数,其实就是0.5 *Math.PI ,之所以将0.5提出来,是为了后续进度的计算
var jindu=function(){
i=i+0.03;
if(i>=enddianXs){
i=enddianXs;
return false;
}
drawBingTu(canvasID,canvascolor,70, 70, 60, i*Math.PI);
}
setInterval(jindu,10);//循环载入进度
}
loadjindu(“canvasH”,0.3,”#33AF91″);
loadjindu(“canvasM”,1.3,”#EA5514″);

</script>
</body>
</html>

47675637563

未经允许不得转载:前端撸码笔记 » canvas绘制扇形进度条

上一篇:

下一篇: