DJervis
4/8/2016 - 6:31 AM

canvas drawProcess

canvas drawProcess

<div class="canvas-wrap">
	<canvas class="canvas" width="90" height="90" data-r-ring="4">96.1%</canvas>
</div>
function drawProcess(){
		$("canvas.canvas").each(function(){
			if($(this).length==0) return false;

			var text = $.trim($(this).text());
			var process = text.substring(0, text.length-1);
			var rRing = $(this).attr("data-r-ring");
			var d = parseInt($(this).width());
			var r = parseInt($(this).width()/2);

			var canvas = this; 
			var context = canvas.getContext("2d");
			context.clearRect(0,0,d,d);

			context.beginPath();
			context.moveTo(r, r);
			context.arc(r, r, r, 0, Math.PI*2, false);
			context.closePath();
			context.fillStyle = "#171a19";
			context.fill();

			context.beginPath();
			context.moveTo(r,r);
			context.arc(r, r, r, 0, Math.PI*2*process/100, false);
			context.closePath();
			context.fillStyle = "#d34544";
			context.fill();

			context.beginPath();
			context.moveTo(r, r);
			context.arc(r, r, r-rRing, 0, Math.PI*2, true);
			context.closePath();
			context.fillStyle = "rgba(255,255,255,1)";
			context.fill();

			if(r>30){
				context.font = "12px Microsoft Yahei";
				context.fillStyle = "#bf2022";
				context.textAlign = "center";
				context.moveTo(r, r);
				context.fillText("胜率", r, r-10);

				context.font = "bold 20px Arial";
				context.fillStyle = "#bf2022";
				context.textAlign = "center";
				context.moveTo(r, r);
				context.fillText(text, r, r+20);
			}else{
				context.font = "14px Arial";
				context.textAlign = "center";
				context.textBaseline = "middle";
				if($(this).attr("data-rank")=="top3"){
					context.fillStyle = "#d34544";
				}else{
					context.fillStyle = "#171a19";
				}
				context.moveTo(r, r);
				context.fillText(text, r, r);
			}
			
		});
	}

	function canvasSupport() {
	    return !!document.createElement('canvas').getContext;
	}
	function canvasApp() {
	    if (!canvasSupport()) {
	   		$(".canvas-wrap").addClass("nocanvas");      
	        return;
	    }else{
	    	drawProcess();
	    }
	}
	canvasApp();