html5 canvas繪制環形進度條，環形漸變色儀表圖

                                           

在繪制圓環前，我們需要知道canvas arc() 方法。

 

 

 

 

一：繪制環形進度條

<canvas id="myCanvas1" data-percent="60">  
	您的瀏覽器不支持canvas標簽。  
</canvas> 

　　

　　　　　　　var pper=0;  
	    var pper_interal;   
	    var dushu=document.getElementById('dushu');
	  
	    var aaa=drawCanvanPercent('myCanvas1','rem',2,'#93BF55',0.2,'#fff', dushu);   
	  
	    function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color,dushu_ele){  
	        if(dw=="rem"){  
	            cir_r=cir_r*($(".charts").width()/5);  
	            line_w=line_w*(window.screen.width/5);  
	        }  
	        var canvas = document.getElementById(ele_id);  
	        var circle = {  
	            r : cir_r/2,      //圓的半徑  
	            per : canvas.getAttribute('data-percent'),      //百分比分子  
	            color : cir_color,      //圓環的顏色  
	            lineWidth : line_w      //圓環的寬度  
	        };  
	        canvas.width=canvas.height=circle.r*2;  
	        canvas.style.borderRadius="50%";  
	        if(canvas.getContext){  
	            var ctx2 = canvas.getContext("2d");  
	            ctx2.fillStyle = fill_color;  
	            ctx2.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, 0, Math.PI*2, false);  
	            ctx2.fill();  
	            var ctx = canvas.getContext("2d");  
	            pper_interal= setInterval(function () {  //間隔10ms調用一次drawmove
	                drawMove(ctx,circle,dushu_ele);  
	            }, 10); 

	            var ctx3 = canvas.getContext("2d");  //繪制底色為灰色的圓圈
	            ctx3.beginPath();  
		    ctx3.strokeStyle = "#ddd";  
		    ctx3.lineWidth=circle.lineWidth;  
		    ctx3.arc(circle.r, circle.r, circle.r, Math.PI*0, Math.PI*2, false);  
		    ctx3.stroke(); 
	        }  
	    }  
	  
	    function drawMove(ctx,circle,dushu_ele){   //根據data-percent的值，實現遞進效果
	        if(pper>=circle.per){  
	            pper=circle.per;  
	            clearTimeout(pper_interal);  
	        }else{  
	            pper++;  
	        }  
	        dushu_ele.innerText=pper+'%';  
	        ctx.beginPath();  
	        ctx.strokeStyle = circle.color;  
	        ctx.lineWidth=circle.lineWidth;  
	        ctx.arc(circle.r, circle.r, circle.r, 0, Math.PI*(pper/100)*360/180, false);  
	        ctx.stroke();  
	    }

 

 

二：繪制環形漸變色儀圖：

<canvas id="myCanvas1" data-percent="85">  
	 您的瀏覽器不支持canvas標簽。  
</canvas>

　　

　　　　　　　var pper=0;  
	    var pper_interal;  
	    var dushu=document.getElementById('dushu'); 
	  
	    var aaa=drawCanvanPercent('myCanvas1','rem',2,'#93BF55',0.2,'#fff', dushu);   
	  
	    function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color,dushu_ele){  
	        if(dw=="rem"){  
	            cir_r=cir_r*($(".charts").width()/5);  
	            line_w=line_w*(window.screen.width/5);  
	        }  
	        var canvas = document.getElementById(ele_id);  
	        var circle = {  
	            r : cir_r/2.5,      //圓的半徑  
	            r2 : cir_r/2,
	            per : canvas.getAttribute('data-percent'),      //百分比分子  
	            color : cir_color,      //圓的顏色  
	            lineWidth : line_w      //圓的顏色  
	        };  
	        canvas.width=canvas.height=circle.r*2;  
	        canvas.style.borderRadius="50%";  
	        if(canvas.getContext){  
	            var ctx2 = canvas.getContext("2d");  
	            ctx2.fillStyle = fill_color;  
	            ctx2.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, Math.PI*0, Math.PI*2, true);  
	            ctx2.fill();  
	            var ctx = canvas.getContext("2d");  
	            pper_interal= setInterval(function () {  
	               drawMove(ctx,circle,dushu_ele);  
	            }, 10); 

	            var ctx3 = canvas.getContext("2d");  
	            ctx3.beginPath();  
		    ctx3.strokeStyle = "#ddd";  
		    ctx3.lineWidth=circle.lineWidth;  
		    ctx3.arc(circle.r, circle.r, circle.r, Math.PI*0.15, Math.PI*0.85, true);  //以逆時針的方式，從0.15PI的位置畫到0.85PI。總角度為234度
		    ctx3.stroke();

	        }  
	    }  
	  
	    function drawMove(ctx,circle,dushu_ele){  
	        if(pper>=circle.per){  
	            pper=circle.per;  
	            clearTimeout(pper_interal);  
	        }else{  
	            pper++;  
	        }  
	        dushu_ele.innerText=pper+'%';  
	        ctx.beginPath(); 
	        var g = ctx.createLinearGradient(0,0,180,0);  //創建漸變對象  漸變開始點和漸變結束點
		g.addColorStop(0, '#A9D25B'); //添加顏色點 
		g.addColorStop(1, '#FA5A2D'); //添加顏色點 
		ctx.strokeStyle = g;     //使用漸變對象作為圓環的顏色
	 
	        ctx.lineWidth=circle.lineWidth;  
	        ctx.arc(circle.r, circle.r, circle.r, Math.PI*0.85, Math.PI*((pper/100)*234/180 + 0.85), false); //這里的儀表盤總度數為234。即(2-0.85)*Math.PI
	        ctx.stroke();  
	    }  

　　繪制刻度：

function drawTicks(ele,cir_r){ 
	     						var  cir_r=cir_r*($(".charts").width()/5); 
	     						var circle = {  
				            r : cir_r/2.5,      //圓的半徑  ,
				       		 }; 
			        	  var _canvas = document.getElementById(ele); 
			         		var context0= _canvas.getContext("2d"); 
			         		for(var i=7;i<34;i++){  
                    //保存當前狀態  
                    context0.save();  
                    //刻度粗細  
                     context0.lineWidth=2;  
                    //刻度顏色  
                    context0.strokeStyle="#666"  
                    //設置00點,以畫布中心為00  
                    context0.translate(circle.r,circle.r);  
                    //設置旋轉角度 參數是弧度，角度 0--360 弧度角度*Math.PI/180  
                    context0.rotate(i*9*Math.PI/180);  
                    context0.beginPath();  
                    //刻度起始點  
                    context0.moveTo(0,circle.r-15);  
                    //刻度結束點  
                    context0.lineTo(0,circle.r-17);  
                    context0.closePath();  
                    context0.stroke();  
                    //將旋轉后的圖片返回原畫布  
                    context0.restore();  
                } 
			            //利用半徑與半徑與x軸夾角繪制單個刻度  
			            
			  }  
			  drawTicks("myCanvas1",2);