<!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>
未经允许不得转载：前端撸码笔记 » canvas绘制扇形进度条