canvas实现环形进度条效果

时间：2021-05-28

昨下午睡着了，晚上打开手机才发现朋友给我发了一个QQ消息，问我这个怎么实现？

这里就选canvas来简单写一下 先上代码，然后在说一说需要注意的点：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas环形进度条</title> <style> body{ background-color:#000; text-align: center; } .canvas1{ margin-top: 100px; display: inline-block; background-color: #FFF; } </style></head><body> <canvas id="circle_process" class="canvas1"></canvas> <script> //初始化动画变量 var requestAnimationFrame = window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame; var cancelAnimationFrame = window.cancelAnimationFrame || window.msCancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelRequestAnimationFrame; //初始化当前进度数 var curPercentCount = 0; //获取canvas对象，设置画布大小 var oC = document.querySelector('#circle_process'); oC.width = 300; oC.height = 300; //获取canvas执行上下文 var ctx = oC.getContext('2d'); //定义小矩形的个数 var miniRectCount = 10; //定义圆心位置 var cirCenter = { x:oC.width/2, y:oC.height/2 }; //定义小矩形的大小rectSize var rectSize = { width:0, height:0 }; //圆对象构造函数 function Circle(center,radius){ this.center = center; this.radius = radius; } //小矩形对象构造函数 function MiniRect(length,width){ this.length = length; this.width = width; } //角度转换成弧度的函数 function d2a(angleInt){ return angleInt*Math.PI / 180; } //百分比转换角度函数（这里减90因为arc0度是从右侧开始的） function percentTurn(percentFloat){ return percentFloat * 360 / 100 - 90; } //画当前百分比扇形的方法 function drawFanForPercent(percentFloat){ ctx.beginPath(); ctx.moveTo(cirCenter.x,cirCenter.y); ctx.lineTo(oC.width/2,(oC.height-baseCircle.radius*2)/2); ctx.arc(cirCenter.x,cirCenter.y,baseCircle.radius,d2a(-90),d2a(percentTurn(percentFloat))); ctx.fillStyle = 'aqua'; ctx.fill(); ctx.closePath(); } //画圆的函数 function drawArc(center,radius,start,end,type,color){ start = start || 0; end = end || 360; ctx.beginPath(); ctx.arc(center.x,center.y,radius,d2a(start),d2a(end)); ctx.fillStyle = color; ctx.strokeStyle = color; if(!!type){ (type === 'fill') && ctx.fill(); (type === 'stroke') && ctx.stroke(); } ctx.closePath(); } //画文字的函数 function drawPercentText(text,percentInt){ ctx.beginPath(); ctx.fillStyle = 'aqua'; ctx.font="italic small-caps bold 40px Calibri"; ctx.textAlign = 'center'; ctx.fillText(text,cirCenter.x,cirCenter.y-18,100); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = 'aqua'; ctx.font="italic small-caps bold 60px Calibri"; ctx.textAlign = 'center'; ctx.fillText(percentInt+'%',cirCenter.x,cirCenter.y+40,100); ctx.closePath(); } //画小方块的方法 function drawMiniRect(startPoint,width,height,axisPoint,rotateAngle){ ctx.save(); ctx.translate(axisPoint.x,axisPoint.y); ctx.rotate(d2a(rotateAngle)); ctx.beginPath(); ctx.fillStyle = '#FFF'; ctx.fillRect(startPoint.x,startPoint.y,rectSize.width,rectSize.height); ctx.closePath(); ctx.restore(); } //画整体 function draw(curPercent){ //底部灰色圆 drawArc(baseCircle.center,baseCircle.radius,null,null,'fill','#CCC'); //进度扇形 drawFanForPercent(curPercent); //内部白色遮挡圆 drawArc(innerCircle.center,innerCircle.radius,null,null,'fill','#FFF'); //画文字 drawPercentText('当前进度',curPercent); //十个小的矩形 for(var i=0; i<miniRectCount; i++){ drawMiniRect(startPoint,rectSize.width,rectSize.height,cirCenter,i*360/miniRectCount); } } //实例化底圆和内圆 var baseCircle = new Circle(cirCenter,130); var innerCircle = new Circle(cirCenter,100); //设置rectSize数值 rectSize.width = 15; rectSize.height = baseCircle.radius - innerCircle.radius + 5; //设置第一个小矩形的起始点 (这里有误差) // var startPoint = { // x: oC.width /2 - 7.5, // y: (oC.height - baseCircle.radius*2) / 2 // }; //由于平移到中心点之后画的位置是在画布外的，所以重新定义 var startPoint = { x:-7.5, y:-baseCircle.radius - 2 }; //这里开定时去显示当前是百分之几的进度 var raf = null; var percent = 0; function actProcess(percentFloat){ percentFloat = percentFloat || 100; percent = Math.round(percentFloat); console.log(percent); curPercentCount++; raf = requestAnimationFrame(function(){ actProcess(percentFloat); }); draw(curPercentCount); if(curPercentCount >= percent){ cancelAnimationFrame(raf); return; } } actProcess(50); // cancelAnimationFrame(raf); //这里没搞懂为什么percent会加 ？ //解： requestAnimationFrame中方法还是需要有参数，这里就用匿名函数回调的执行体去指定。 //直接画弧形的测试： //drawArc(innerCircle.center,innerCircle.radius,0,260,'fill','red'); </script></body></html>

接下来说一些注意点和我写的过程中碰到的疑问：

疑问：

01 整体代码没有封装成一个组件，感兴趣的同学可以封装一下。 我这有时间也会封装。

02 画文字的时候只能单独画一行文字么？ 怎样进行换行？

03 canvas怎样处理响应式？

注意点：

01 画布平移之后，画布上的点也会被平移，所以我在定义第一个小矩形的起始点的时候才会重新定义一个负值。

02 直接画弧形来控制进度不准确，因为arc会自动closePath(),最终形成这样的一个效果。

03 默认圆的0度起始位置是从3点钟方向开始的（见上图），那么想从12点钟位置开始走进度，需要减去90度的角度。

04 requestAnimationFrame的回调函数在有参数的情况下还是需要传参数的，需要借助匿名函数回调，在执行体里面去执行想要loop的函数内容（可传参数）。否者会出现注释中写道的pecent不规则增加的问题。

先就这样，之后可能会结合一个上传图片的小功能尝试把它封装成一个组件。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章