html5 canvas绘制环形进度条，环形渐变色仪表图

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