话很少说先上效果图,符合需求再往下看:
这是参考有赞商城作的一个小功能。
直接贴方法,到时候直接调用方法传值就好。html
html:canvas
<canvas id="circle" class="circle-item" width="240px" height="240px" > </canvas>
script:this
mounted() { this.toCanvas("circle", 70); //第一个是id,第二个百分比(圆弧到达位置) },
toCanvas(id, progress) { //canvas进度条 var canvas = document.getElementById(id); var ctx = canvas.getContext("2d"); var percent = progress; //最终百分比 var circleX = canvas.width / 2; //中心x坐标 var circleY = canvas.height / 2; //中心y坐标 var radius = 90; //圆环半径 var lineWidth = 14; //圆形线条的宽度 //中间的字 var fontSize = 25; ctx.font = fontSize + "px April"; ctx.textAlign = "center"; ctx.fillStyle = "#000"; ctx.fillText(parseFloat(percent).toFixed(0), circleX, circleY); fontSize = 12; ctx.font = fontSize + "px April"; ctx.fillStyle = "#999"; ctx.fillText("个人成长值", circleX, circleY - 40); ctx.fillStyle = "#999"; ctx.fillText("还差20积分升级会员", circleX, circleY + 40); //画圆 function circle(cx, cy, r) { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = lineWidth; ctx.strokeStyle = "#fff"; ctx.arc(cx, cy, r, (Math.PI * 2) / 3, (Math.PI * 1) / 3); ctx.stroke(); } // 画弧线 function sector(cx, cy, r, startAngle, endAngle) { 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 = "red"; //圆弧两端的样式 ctx.lineCap = "round"; //圆弧 ctx.arc( cx, cy, r, (Math.PI * 2) / 3, (Math.PI * 2) / 3 + (endAngle / 100) * ((Math.PI * 5) / 3), false ); ctx.stroke(); } // 圆形 circle(circleX, circleY, radius); //圆弧 sector(circleX, circleY, radius, (Math.PI * 2) / 3, percent); },
但愿能帮助你,继续努力加油鸭!!spa