canvas绘制进度圆环
1.封装方法
function CanvasCov(id,progress){
var canvas = document.querySelector(id);
var x = canvas.width/2;
var y= canvas.height/2;
var per = progress/100; //百分比
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height); //先清空画布
ctx.beginPath(); //绘制第一部分弧线
ctx.arc(x,y,100,0,2*Math.PI*per);
ctx.strokeStyle="red";
ctx.lineWidth=50; //弧线/圆环的宽度
ctx.stroke();
ctx.beginPath(); //绘制第二条弧线
ctx.arc(x,y,100,2*Math.PI*per,2*Math.PI);
ctx.strokeStyle="black";
ctx.lineWidth=50;
ctx.stroke();
ctx.font="40px 宋体"; //设置圆环中心显示的文字
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillStyle="green";
ctx.fillText(progress+"%",x,y);
}
调用(动画式的逐渐显示)
var process=0;
var percent = 30;//百分比
var inter = window.setInterval(function(){
if (process / percent <1) {
process+=2;
}
CanvasCov('#canvas',process) ;
},20)
这只是一个简单的demo,如果需要复杂的状态,还需完善