android制作扇形进度条,canvas绘制扇形进度条

您的浏览器版本太老，不支持canvas，建议升级浏览器 24小时

您的浏览器版本太老，不支持canvas，建议升级浏览器 30分

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″);