HTML5 canvas-CircleProgres.js实现环形饼图刻度效果

 

<script src="../js/dist/circle-progress.js"></script>

 

        //业务需要的系数，可以忽略
        var timeH_no = 30;//换算每个小时相对度数
        var timeM_no = 0.5;//每一分钟相对度数
			
		startH = sleepTime.slice(11,13);
        if(startH.charAt(0) == 0){
        	startH = startH.slice(1, 2);
        }
		startM = sleepTime.slice(14,16);
        if(startM.charAt(0) == 0){
        	startM = startM.slice(1, 2);
        }
		endH = wakeUpTime.slice(11,13);
        if(endH.charAt(0) == 0){
        	endH = endH.slice(1, 2);
        }
		endM = wakeUpTime.slice(14,16);
        if(endM.charAt(0) == 0){
        	endM = endM.slice(1, 2);
        }
		//0~360
		var x = startH * timeH_no + startM * timeM_no;
		var y = endH * timeH_no + endM * timeM_no;
		//x到y差多少度，得到百分比
		var sa = (-Math.PI / 6 * 3 + Math.PI / 6 * 0) + Math.PI / 180 * x;
		var p = 10/3600 * (y - x);

		var two_sa = (-Math.PI / 6 * 3 + Math.PI / 6 * 0) + Math.PI / 180 * y;;


                //图一
		$('.forth.circle_one').circleProgress({
		    size: 239,
		    thickness: 21,
		    startAngle: sa,//
		    value: 0,//
		    lineCap: 'round',
		    fill: { gradient: ['#FF3340'] },
		    //fill: { gradient: new gradientColor('#FF6000','#FFA200',100) }
		});

                //图二
		$('.forth.circle_two').circleProgress({
		    size: 239,
		    thickness: 21,
		    startAngle: two_sa,//
		    value: 0,//
		    lineCap: 'round',
		    fill: { gradient: ['#229EE6'] },
		});

                //图三，颜色渐变还是基于从左到右，没有根据圆环弧度着色
		$('.forth.circle_thr').circleProgress({
		    size: 239,
		    thickness: 21,
		    startAngle: sa,//
		    value: p,//
		    lineCap: 'round',
		    fill: { gradient: ['#FF6000', '#FFA200'] },
		});

效果：