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