**
canvas加载进度条
**
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script>
var can=document.getElementsByTagName("canvas")[0];
var ctx=can.getContext("2d");
var w=can.width;
var h=can.height;
var star=-90;
var end=-90;
var count=60;
var length=100;
ctx.lineWidth="30";
ctx.lineCap="round";
ctx.font="30px '楷体'";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.strokeStyle="#ccc";
ctx.arc(w/2,h/2,(w/2-length),-Math.PI/2,Math.PI/2*3);
ctx.stroke();
var timer=setInterval(max,20);
function max(){
ctx.strokeStyle="pink";
ctx.clearRect((w/2-90),(h/2-90),180,180);
ctx.fillText((end+90)+"/360",w/2,h/2,200,200);
ctx.beginPath();
ctx.arc(w/2,h/2,(w/2-length),Math.PI/180*star,Math.PI/180*(end++));
ctx.stroke();
if(end>270){
end=-90;
ctx.clearRect((w/2-90),(h/2-90),180,180);
ctx.fillText("加载完成",w/2,h/2,200,200);
clearInterval(timer);
}
}
</script>
</body>
</html>