html部分

<canvas id="canvas" width="150" height="150"><p>抱歉，您的瀏覽器不支持canvas</p> </canvas>

js部分

toCanvas('canvas','red',30);/*** 生成環形進度條*/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 * 2 / 3, Math.PI * 1 / 3);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 * 2 / 3),(Math.PI * 2 / 3) + endAngle / 100 * (Math.PI * 5 / 3),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 * 2 / 3, 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);}

?

轉載于:https://www.cnblogs.com/duanyue/p/10476443.html

總結

以上是生活随笔為你收集整理的canvas实现半圆环形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。