利用canvas实现圆环评分效果，web开发技术用于手机端展现

近期的项目中，有需要用到圆环来体现评分的动态效果。

这是一个手机上的项目，演示地址：http://120.25.249.254:8080/demo/mobile_car/tongji_m.html

利用了canvas来实现的，实现原理

<div class="pingfen_m">
    <canvas id="zongpf_di" class="zongpf_di"></canvas>
    <canvas id="zongpf" class="zongpf"></canvas>
    <div class="pf_num"></div>
    <div class="pf_tis">爱车存在一定的问题</br>请注意日常驾驶习惯</div>
    <div class="beebee_tis">
    <div class="beebee_tis_font">
    综合分数为普通级别，</br>请尽快保养护理！
        </div>
    </div>
<div class="test_reload"></div>
<div class="share_btn"></div>
</div>

一，首先创建一个环色为灰色的底。

    <canvas id="zongpf_di" class="zongpf_di"></canvas>

<script>

var canvas2d_di = document.getElementById("zongpf_di").getContext("2d");

var si=0.015; //动态加分效果用的每块弧的比例
var deg = 1;
var deg2=1;
var beginP=0.75;//圆环开始的位置，0在正右方，0.5在正下方，1在正左方，1.5在正上方，2在正右方，以此类推
var c_x=$('.pingfen_m').width()/2;//定画圆的X坐标，这里我是取标签的宽度来算的。
var c_y=$('.pingfen_m').width()/2.5;//定画圆的Y坐标，这里我是取标签的宽度来算的。
var c_r=$('.pingfen_m').width()/3;//定画圆的半径，这里我是取标签的宽度来算的。
canvas2d_di.canvas.width  =$('.pingfen_m').width();//这个很重要，canvas的宽和高必需要这个方来设置，不然的话就会变形
canvas2d_di.canvas.height =$('.pingfen_m').width();
canvas2d_di.arc(c_x,c_y,c_r,0.75*Math.PI,2.25*Math.PI,false);//画圆开始，从0.75画到2.25，正好就是我需要的圆弧
canvas2d_di.strokeStyle = "#5e5e63"; //canvas边框颜色
canvas2d_di.lineWidth = 5; //线宽
canvas2d_di.stroke();

</script>

二，创建一个渐变色的环在上面。

<canvas id="zongpf" class="zongpf"></canvas>

<script>   

 var draw = function(degr){
        canvas2d.canvas.width  =$('.pingfen_m').width();
        canvas2d.canvas.height =$('.pingfen_m').width();
        var r = degr+beginP;   //canvas绘制圆形进度
        canvas2d.clearRect(0,0,$('.pingfen_m').width(),$('.pingfen_m').width());   //先清理掉上次画的圆，不清理的话，会有很多圆叠在上面，看起来怪怪的。
        canvas2d.beginPath();  //路径开始
        //canvas2d.fillStyle = "#2c2c2f"; //填充颜色
var gradient=canvas2d.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","#ffbb28");
gradient.addColorStop("0.5","#ffbb28");
gradient.addColorStop("1.0","#ff2708");
        canvas2d.strokeStyle = gradient;
        canvas2d.lineWidth = 5; //线宽
        canvas2d.arc(c_x,c_y,c_r,beginP*Math.PI,r*Math.PI,false);
        canvas2d.stroke();
    };

function getRandom(n){
        return Math.floor(Math.random()*n+1)
        }

$( document ).ready(function() { 
var pfnum=getRandom(100);//随机取一个0至100的数，做为测试的分值
    var t = setInterval(function(){//定义一个每0.01秒执行一次的方法。
        deg+=1;
draw(deg*si);//从1分开始算起，每1分就执行一个画彩色环的方法，当然是越画越长，
$(".pf_num").html(deg);
if(deg>pfnum){//当到达测试分值时，退出每0.01秒执行一次的方法
clearInterval(t);
}
          },10);
    });

</script>