xiaoben-as2-php/js/tb.js

function initTb(id,FENSHU,ftext,btext){
	var bs = 3;
	//canvas initialization
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext("2d");
	//dimensions
	var s1 = 170,s2=170;
	canvas.width = s1*bs;
	canvas.height = s2*bs;
	var W = canvas.width;
	var H = canvas.height;
	var cpt = canvas.parentNode;
	cpt.style.width = s1+"px";
	cpt.style.height = s2+"px";
	canvas.style["transform"] = canvas.style["-webkit-transform"] = canvas.style["-moz-transform"] = "scale("+1/bs+") translate(-510px,-510px)";
	//Variables
	var degrees = 0;
	var new_degrees = 0;
	var difference = 0;
	var color = FENSHU>=50?"#00bc8c":"#00bc8c"; //green looks better to me
	var bgcolor = "#cce9e2";
	var text;
	var animation_loop, redraw_loop;
	var new_fs = FENSHU;
	if(new_fs==0){
		new_fs=0.5;
	}
	function init(){
		//Clear the canvas everytime a chart is drawn
		ctx.clearRect(0, 0, W, H);

		//Background 360 degree arc
		var r = 50;
		ctx.beginPath();
		ctx.strokeStyle = bgcolor;
		ctx.lineJoin = "round";
		ctx.lineWidth = 4*bs;    //预填充环的宽度
		ctx.arc(W/2, H/2, r*bs, 0, Math.PI*2, false); //you can see the arc now
		ctx.stroke();
		
		ctx.beginPath();

		//gauge will be a simple arc
		//Angle in radians = angle in degrees * PI / 180
		var radians = degrees * Math.PI / 180;
		ctx.beginPath();
		ctx.strokeStyle = color;
		ctx.lineWidth = 8*bs;    //填充环的宽度
		//The arc starts from the rightmost end. If we deduct 90 degrees from the angles
		//the arc will start from the topmost end
		ctx.arc(W/2, H/2, r*bs, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
		//you can see the arc now
		if(new_fs>0.5)
		ctx.stroke();         
		//Lets add the text
		ctx.fillStyle = "#00bc8c";
		//Lets center the text
		//deducting half of text width from position x
		var fm = '"Lantinghei SC","Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif';
		ctx.font = 18*bs+"px "+fm;
		text_width = ctx.measureText(ftext).width;
		//adding manual value to position y since the height of the text cannot
		//be measured easily. There are hacks but we will keep it manual for now.		 
		ctx.fillText(ftext, W/2 - text_width/2, H/2 + 10*bs);
		
		text = btext;
		ctx.font = 16*bs+"px "+fm;
		//ctx.fillStyle = "#555555";
		text_width = ctx.measureText(text).width;
		ctx.fillText(text, W/2 - text_width/2, H/2 + 80*bs);
	}

	function draw(){
		//Cancel any movement animation if a new chart is requested
		if(typeof animation_loop != undefined) clearInterval(animation_loop);
		new_degrees=new_degrees+1;
		difference = new_degrees - degrees;
		animate_to();
	}

	//function to make the chart move to new degrees
	function animate_to(){
		//clear animation loop if degrees reaches to new_degrees
		var fs = parseInt((new_fs/100)*360);
		if(degrees == fs) 
		 clearInterval(animation_loop);

		if(degrees==fs)//如果加载到了360度，就停止
		 return;

		if(degrees < new_degrees)
		 degrees++;
		else
		 degrees--;
		 degrees = fs;
		init();
	}

	//调用各个函数，实现动态效果
	draw();
	//redraw_loop = setInterval(draw, 10); //Draw a new chart every 2 seconds
}

function initTbOrange(id,FENSHU,ftext,btext){
	var bs = 3;
	//canvas initialization
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext("2d");
	//dimensions
	var s1 = 170,s2=170;
	canvas.width = s1*bs;
	canvas.height = s2*bs;
	var W = canvas.width;
	var H = canvas.height;
	var cpt = canvas.parentNode;
	cpt.style.width = s1+"px";
	cpt.style.height = s2+"px";
	canvas.style["transform"] = canvas.style["-webkit-transform"] = canvas.style["-moz-transform"] = "scale("+1/bs+") translate(-510px,-510px)";
	//Variables
	var degrees = 0;
	var new_degrees = 0;
	var difference = 0;
	var color = FENSHU>=50?"#00bc8c":"#ff6938"; //green looks better to me
	var bgcolor = "#cce9e2";
	var text;
	var animation_loop, redraw_loop;
	var new_fs = FENSHU;
	function init(){
		//Clear the canvas everytime a chart is drawn
		ctx.clearRect(0, 0, W, H);

		//Background 360 degree arc
		var r = 50;
		ctx.beginPath();
		ctx.strokeStyle = bgcolor;
		ctx.lineJoin = ctx.lineCap = "round";
		ctx.lineWidth = 4*bs;    //预填充环的宽度
		ctx.arc(W/2, H/2, r*bs, 0, Math.PI*2, false); //you can see the arc now
		ctx.stroke();
		ctx.beginPath();

		//gauge will be a simple arc
		//Angle in radians = angle in degrees * PI / 180
		var radians = degrees * Math.PI / 180;
		ctx.beginPath();
		ctx.strokeStyle = color;
		ctx.lineWidth = 8*bs;    //填充环的宽度
		//The arc starts from the rightmost end. If we deduct 90 degrees from the angles
		//the arc will start from the topmost end
		ctx.arc(W/2, H/2, r*bs, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); 
		//you can see the arc now
		ctx.stroke();         
		//Lets add the text
		ctx.fillStyle = "#00bc8c";
		//Lets center the text
		//deducting half of text width from position x
		var fm = '"Lantinghei SC","Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,Arial,sans-serif';
		ctx.font = 18*bs+"px "+fm;
		text_width = ctx.measureText(ftext).width;
		//adding manual value to position y since the height of the text cannot
		//be measured easily. There are hacks but we will keep it manual for now.		 
		ctx.fillText(ftext, W/2 - text_width/2, H/2 + 10*bs);
		
		text = btext;
		ctx.font = 16*bs+"px "+fm;
		ctx.fillStyle = "#b8542e";
		text_width = ctx.measureText(text).width;
		ctx.fillText(text, W/2 - text_width/2, H/2 + 80*bs);
	}

	function draw(){
		//Cancel any movement animation if a new chart is requested
		if(typeof animation_loop != undefined) clearInterval(animation_loop);
		new_degrees=new_degrees+1;
		difference = new_degrees - degrees;
		animate_to();
	}

	//function to make the chart move to new degrees
	function animate_to(){
		//clear animation loop if degrees reaches to new_degrees
		var fs = parseInt((new_fs/100)*360);
		if(degrees == fs) 
		 clearInterval(animation_loop);

		if(degrees==fs)//如果加载到了360度，就停止
		 return;

		if(degrees < new_degrees)
		 degrees++;
		else
		 degrees--;
		degrees = fs; 
		init();
	}

	//调用各个函数，实现动态效果
	draw();
	//redraw_loop = setInterval(draw, 10); //Draw a new chart every 2 seconds
}