近期的项目中,有需要用到圆环来体现评分的动态效果。
这是一个手机上的项目,演示地址: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>