详解canvas实现圆弧、圆环进度条的实例方法

此方法通过canvas绘制圆形的方法来实现动态圆环进度条，直接上代码，疑问请看注释：

HTML代码如下， 在页面里创建一个画布即可：

canvas id="canvas" width="300" height="300">
        p>
    抱歉，您的浏览器不支持canvas/p>
     /canvas>
    

JS分两大部分，
第一部分实现整体功能，第二部分调用：
第一部分：
　　第一部分功能原理大概是，画两个圆，一个是底色圆，第二个是动态加载的圆弧，进度通过定时器加载；颜色加渐变色；

 function toCanvas(id ,PRogress){
                    canvas进度条                VAR canvas = document.getElementById(id),                ctx = canvas.getContext("2d"),                PErcent = progress,  最终百分比                circleX = canvas.width / 2,  中心x坐标                circleY = canvas.height / 2,  中心y坐标                radius = 100, 圆环半径                lineWidth = 5,  圆形线条的宽度                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 = '#00f8bb';
                         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.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(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5);
                         smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5);
                         控制结束时动画的速度                     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);
                                 }
    第二部分，调用封装好的代码：            toCanvas('canvas',50);
    

【相关推荐】

1. Canvas实现圆形进度条并显示数字百分比

2. 利用CSS clip 实现音频播放圆环进度条教程实例

3. 分享h5 canvas圆圈进度条的实例代码

4. H5 canvas实现圆形动态加载进度实例

以上就是详解canvas实现圆弧、圆环进度条的实例方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！