圆环进度条 · 前端技术总结

canvas实现圆环进度条效果： ![](https://box.kancloud.cn/76b811f8beef530f8f1f77a5192f52a8_152x150.jpg) 代码： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas圆形进度条</title> </head> <body> <canvas id="canvas" data-percent="10"></canvas> <script> var $ = document.querySelector.bind(document); var canvas = $('#canvas'), canvasWth = 500; canvasHgt = 500; canvas.width = canvasWth; canvas.height = canvasHgt; canvas.style.backgroundColor = '#999'; var ctx = canvas.getContext('2d'); // 灰色圆环 ctx.beginPath(); ctx.lineWidth = 10; ctx.strokeStyle = '#666'; ctx.arc(200, 200, 60, 0, 2*Math.PI, true); // true：逆时针 false：顺时针 ctx.stroke(); ctx.closePath(); // 旋转改变开始位置 ctx.translate(200, 200); ctx.rotate(2*Math.PI*(270/360)); ctx.translate(-200, -200); // 绿色进度(+号表示字符串转整数) var percent = +canvas.dataset.percent; function progress() { percent++; if(percent <= 100) { // 角度 percent = percent>100?100:percent; var ang = Math.round(360*percent/100%360); // 进度条 ctx.beginPath(); ctx.lineWidth = 10; ctx.strokeStyle = '#03C96A'; ctx.arc(200, 200, 60, 2*Math.PI*(ang/360), 2*Math.PI, true); // true表示顺时针 ctx.stroke(); ctx.closePath(); // 文本 ctx.save(); // 保存上一个状态 ctx.translate(200, 200); ctx.rotate(2*Math.PI*(-270/360)); ctx.translate(-200, -200); ctx.clearRect(180, 180, 54, 30); // 清楚上次的文本绘制 ctx.font = '20px seris'; ctx.fillStyle = '#fff'; ctx.fillText(percent+'%', 180, 205); ctx.restore(); // 恢复上一个状态 // 请求动画针 window.requestAnimationFrame(progress); } } progress(); </script> </body> </html> ~~~ ![](https://box.kancloud.cn/e9c2994f8126f641107efff9593b37cc_210x203.jpg) 吟诗一首: ~~~ 《将进酒》唐李白君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。 ~~~ ![](https://box.kancloud.cn/98020af020fe21a41f6110d7487ef0a7_345x399.jpg)