<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="js/Progress.js"></script>
</head>
<body>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
<canvas id="canvas4"></canvas>
<canvas id="canvas5"></canvas>
<canvas id="canvas6"></canvas>
<canvas id="canvas7"></canvas>
<canvas id="canvas8"></canvas>
<canvas id="canvas9"></canvas>
<canvas id="canvas10"></canvas>
<script type="text/javascript">
window.onload = function(){
var num = Math.round(4.8/5*100);
var num2 = Math.round(4.9/5*100);
new Progress().renderOne('canvas1',100,5,10);//id,大小,边框粗细,百分比
new Progress().renderOne('canvas2',100,5,20);
new Progress().renderOne('canvas3',100,5,30);
new Progress().renderOne('canvas4',100,5,40);
new Progress().renderOne('canvas5',100,5,50);
new Progress().renderOne('canvas6',100,5,60);
new Progress().renderOne('canvas7',100,2,70);
new Progress().renderOne('canvas8',100,10,num);
new Progress().renderOne('canvas9',100,10,num2);
new Progress().renderOne('canvas10',100,10,100);
}
</script>
</body>
</html>
var Progress = function() {
var progress = {
textheight: null,
renderOne: function(id, length, r, percent) {
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
canvas.width = length;
canvas.height = length;
var i = 0;
var interval = setInterval(function() {
i++;
progress.render(context, length, r, i, percent);
if (i >= percent) {
clearInterval(interval)
}
},
10)
},
render: function(context, length, r, i, percent) {
context.clearRect(0, 0, length, length);
context.beginPath();//起始一条路径，或重置当前路径
var gradient = context.createLinearGradient(length, 0, 0, 0); //定义一个渐变作为填充样式
gradient.addColorStop("0", "#5514f2");
gradient.addColorStop("1.0", "#7633f8");
context.strokeStyle = gradient; //设置或返回用于笔触的颜色、渐变或模式，这里是渐变
context.lineWidth = r;//设置或返回当前的线条宽度
//绘制顺时针的1/4圆
if(percent==100){ //如果是百分百的时候显示起点和结束点都是一个位置
context.arc(length / 2, length / 2, length / 2 - r, -0.2 * Math.PI, -0.2 * Math.PI + i * 0.02 * Math.PI, false);
}else{
context.arc(length / 2, length / 2, length / 2 - r, -0.2 * Math.PI, -0.25 * Math.PI + i * 0.02 * Math.PI, false);
}
//context.arc(length / 2, length / 2, length / 2 - r, 1.8 * Math.PI, 1.78 * Math.PI + i * 0.02 * Math.PI, false);
context.stroke(); //绘制已定义的路径
context.closePath(); //创建从当前点回到起始点的路径
context.beginPath(); //起始一条路径，或重置当前路径
context.lineCap = 'round';//设置或返回线条的结束端点样式,butt 默认。向线条的每个末端添加平直的边缘。round 向线条的每个末端添加圆形线帽。square 向线条的每个末端添加正方形线帽 。
//设置字体样式
context.font = "bold " + (length / 2 - 1 * r) / 2 + "px 微软雅黑";
context.fillStyle = "#5515f2";
//var text = percent + "%";//占比百分数
var val = percent/100*5; //占比百分数/5=评分
var text = Math.round(val * 10) / 10; //四舍五入保留一位小数
textwidth = context.measureText(text).width; //在画布上输出文本之前，检查字体的宽度：
if (this.textheight == null) {
var div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = text;
div.style.fontSize = ((length / 2 - 1 * r) / 2) + "px";
this.textheight = div.offsetHeight;
div.parentNode.removeChild(div)
}
textheight = this.textheight;
context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4);
context.fill();
context.closePath()
}
};
return progress
};