circular fan loading animation canvas

Using the DOM to operate is much more convenient.

1. Add an image to the html

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

2. Make pictures

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

Reference: http://www.clanfei.com/2014/12/1745.html