canvas绘制加载特效

 

css样式：
body{
text-align: center;
}
canvas{
background: #ddd;
}

canvas标签：

<canvas id="canvas" width="500" height="400"></canvas>
js：
　　var elem = document.getElementById("canvas");
　　var canvas = elem.getContext("2d");//获取画笔
　　//开始路径
　　//var a = -90*Math.PI/180;
　　canvas.beginPath();
　　canvas.lineWidth=10;
　　canvas.arc(250,200,100,0*Math.PI/180,360*Math.PI/180);
　　canvas.strokeStyle = "#aaa";
　　canvas.stroke();
　　var b = -90;
　　var timer = setInterval(function(){
　　canvas.beginPath();
　　canvas.arc(250,200,100,-90*Math.PI/180,(b++)*Math.PI/180);
　　canvas.strokeStyle = "green";
　　canvas.stroke();
　　// if(b>=270){
　　// clearInterval(timer);
　　// timer = null;
　　// }
　　},10);