半圆形仪表盘进度条
Posted cnaholic
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了半圆形仪表盘进度条相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery.min.js"></script> <script> $(function(){ toCanvas(‘canvas‘,‘red‘,50/60*100); }) /** * 生成环形进度条 */ function toCanvas(id, color, progress) { //canvas进度条 var canvas = document.getElementById(id), ctx = canvas.getContext("2d"), percent = progress, //最终百分比 circleX = canvas.width / 2, //中心x坐标 circleY = canvas.height / 2, //中心y坐标 radius = 60, //圆环半径 cradius = 75, // canvas半径 lineWidth = 6, //圆形线条的宽度 fontSize = 20; //字体大小 //两端圆点 function smallcircle1(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = 1; ctx.fillStyle = ‘#06a8f3‘; ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill(); } function smallcircle2(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = 1; ctx.fillStyle = ‘#fff‘; ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fill(); } //画圆 function circle(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = lineWidth; ctx.strokeStyle = ‘#eee‘; ctx.arc(cx, cy, r, Math.PI * 1, Math.PI * 2); ctx.stroke(); } //画弧线 function sector(cx, cy, r, startAngle, endAngle, anti) { ctx.beginPath(); //ctx.moveTo(cx, cy + r); // 从圆形底部开始画 ctx.lineWidth = lineWidth; // 渐变色 - 可自定义 // var linGrad = ctx.createLinearGradient( // circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY // ); // linGrad.addColorStop(0.0, ‘#06a8f3‘); // //linGrad.addColorStop(0.5, ‘#9bc4eb‘); // linGrad.addColorStop(1.0, ‘#00f8bb‘); // ctx.strokeStyle = linGrad; // 进度条颜色 ctx.strokeStyle = color; //圆弧两端的样式 ctx.lineCap = ‘round‘; //圆弧 ctx.arc( cx, cy, r, (Math.PI * 1), (Math.PI * 1) + endAngle / 100 * (Math.PI), false ); ctx.stroke(); } //刷新 function loading() { if (process >= percent) { clearInterval(circleLoading); } //清除canvas内容 ctx.clearRect(0, 0, circleX * 2, circleY * 2); //中间的字 ctx.font = fontSize + ‘px April‘; ctx.textAlign = ‘center‘; ctx.textBaseline = ‘middle‘; ctx.fillStyle = ‘#999‘; ctx.fillText(parseFloat(process).toFixed(0) + ‘%‘, circleX, circleY); //圆形 circle(circleX, circleY, radius); //圆弧 sector(circleX, circleY, radius, Math.PI * 1, process); //两端圆点 // smallcircle1(cradius + Math.cos(2 * Math.PI / 360 * 120) * radius, cradius + Math.sin(2 * Math.PI / 360 * 120) * // radius, 0); // smallcircle2(cradius + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * radius, cradius + Math.sin(2 * Math.PI / // 360 * (120 + process * 3)) * radius, 2); //控制结束时动画的速度 if (process / percent > 0.90) { process += 0.30; } else if (process / percent > 0.80) { process += 0.55; } else if (process / percent > 0.70) { process += 0.75; } else { process += 1.0; } } var process = 0.0; //进度 var circleLoading = window.setInterval(function() { loading(); }, 20); } </script> </head> <body> <canvas id="canvas" width="300" height="300"> <p>抱歉，您的浏览器不支持canvas</p> </canvas> </body> </html>
效果图
以上是关于半圆形仪表盘进度条的主要内容，如果未能解决你的问题，请参考以下文章