圆形扇形加载动画 canvas

用DOM来操作方便多了。

1、在html中添加一张图片

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

2、制作图片

//执行
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;	
}

参考资料： http://www.clanfei.com/2014/12/1745.html