圓環進度條 · 前端技術總結

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)