圓形扇形加載動畫 canvas

用DOM來操做方便多了。

一、在html中添加一張圖片

<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;	
}

參考資料： http://www.clanfei.com/2014/12/1745.html