公司项目的一个demo，需要效果如图所示：
在这个论坛的问问上问了，希望得到好的思路，没人回我，只好自己想了一个，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=1080,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="description" content="">
<meta name="keywords" content="">
<title>demo</title>
<style type="text/css">
body{
font-family: Microsoft YaHei;
}
.progress{
width:1080px;
height:860px;
position:relative;
}
.percent{
position:absolute;
left:0;
top:250px;
width:100%;
line-height:280px;
font-size:260px;
text-align:center;
text-indent:80px;
}
.percent .d{
font-size:60px;
}
.mile{
position:absolute;
left:50%;
top:650px;
width:330px;
line-height:100px;
font-size:100px;
text-align:center;
transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
}
.mile .d{
position:absolute;
right:10px;
top:0px;
font-size:40px;
line-height:60px;
}
</style>
</head>
<body class="">
<div class="progress">
<canvas id="canvas"></canvas>
<div class="percent"><span id="percent">0</span><span class="d">%</span></div>
<div class="mile">
<span id="mile">0</span><span class="d">km</span>
</div>
</div>
<script>
function animation(){
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
percent = document.getElementById('percent'),
mile = document.getElementById('mile'),
obj = {
width: 1080,
height: 860,
dx: 70, // 刻度宽度
dy: 8, // 刻度高度
num: 100, // 刻度条数
r: 400, // 半径
start:-45, // 开始角度，与结束角度相对称
progress: 80, // 显示进度 （单位百分比）
index: 0, // 开始刻度
defaultColor: '#dee1e4', // 开始颜色
activeColor: '#2fd498' // 进度条颜色
};
obj.deg = (180 - 2*obj.start)/obj.num;
canvas.width = obj.width;
canvas.height = obj.height;
ctx.save();
ctx.font = "500 42px Microsoft YaHei ";
ctx.fillStyle = "#9b9b9c";
ctx.fillText('剩余电量',460,230);
ctx.fillText('预估里程',460,630);
ctx.restore();
for(var x=0; x < obj.num+1;x++){ //灰色刻度线
draw(x,obj.defaultColor);
}
function draw(x,color){ // 画出环形刻度线
ctx.save();
var deg = Math.PI/180*(obj.start + obj.deg*x); // 角度换算弧度
var offsetY = -(Math.sin(deg)*obj.r); // 计算刻度Y轴位置
var offsetX = -(Math.cos(deg)*obj.r); // 计算刻度X轴位置
ctx.fillStyle = color;
ctx.translate(obj.width/2+offsetX,obj.height/2+offsetY); // 修改画布坐标原点
ctx.rotate(deg); // 旋转刻度
ctx.fillRect(0,0,obj.dx,obj.dy); // 画出刻度
ctx.restore();
}
function animate(s,time){
if(obj.progress == 0){ // 进度为0直接退出函数
return false;
}
draw(s,obj.activeColor);
var num = obj.progress*(obj.num/100); //格数计算
percent.innerHTML = parseInt((s/obj.num)*100); // 剩余电量计算
mile.innerHTML = parseInt(s*2.5); // 预估里程数计算
var timmer = setTimeout(function(){
obj.index = s+1;
if(s >= num ){
clearTimeout(timmer);
}else{
if(s > num - 10){ // 剩余10格动画减速
animate(obj.index,time+20);
}else{
animate(obj.index,time);
}
}
},time)
}
animate(obj.index,10)
}
animation()
</script>
</body>
</html>
大体还是实现了，就是动画效果差点，将就着用，然后如果大家有更好的想法或者优化，欢迎告诉我。