圆形扇形加载动画 canvas

<img id="circleloading" src="">

//执行
circle(35);

function circle(bfb) {
//10等分
var df=Math.floor(bfb/10)*0.2;

var percent = -0.5 + df;
percent = percent.toFixed(1); //只保留1位
if (percent > 1.5) {
return false;
}
var canvas = document.createElement("canvas");
context = canvas.getContext("2d"); //画布

context.beginPath();
//定位画布的起点坐标
context.translate(100, 100);
//起始连接点 直线链接
context.moveTo(0, 0);
//结束点的位置
context.arc(0, 0, 50, -0.5 * Math.PI, percent * Math.PI);
//填充颜色
context.fillStyle = "#ccc"; //填充颜色
context.fill();

var img = canvas.toDataURL("image/png");
var circleimg = document.getElementById("circleloading");
circleimg.src=img;
}