实现环形百分比

Posted 2020-07-18 Web小世界

最近研究了下canvas环形百分图，先说明一下基础知识：

绘制圆环：

var canvas=document.getElementById("canvas");

 

var cxt = canvas.getContext("2d");

// 绘制底层圈
cxt.beginPath();
cxt.arc(30,30,20,0,Math.PI*2,false);
cxt.lineWidth=4;
cxt.strokeStyle="#ccc";
cxt.stroke();

// 画一个空心圆
cxt.beginPath();
cxt.arc(30,30,20,0,Math.PI*2/4,false);//注意顺序,true表示逆时针,默认false顺时针，x=30,y=30,半径20，从3点钟方向开始，顺时针90度
cxt.lineWidth=5;
cxt.strokeStyle="green";
cxt.stroke();//画空心圆

// 画扇形1
cxt2.beginPath();
cxt2.arc(30,30,15,0,Math.PI*2/6,false);//发现当边宽是半径2倍的时候能画出扇形
cxt2.lineWidth=30;
cxt2.strokeStyle="green";
cxt2.stroke();//画空心圆

// 画扇形2
ctx3.beginPath();
ctx3.moveTo(50, 50);// 先移动到圆心,最后闭合才能画出扇形（1）
ctx3.arc(50,50,50,0,Math.PI*2/1.4,false);
ctx3.fillStyle="#000";//填充颜色,默认是黑色
ctx3.fill();//画实心圆
ctx3.closePath();

ctx3.beginPath();
// 移动到圆心
// ctx3.moveTo(50, 50);
//从外边上的点画曲线
ctx3.arc(50, 50, 50, 0, Math.PI*2/6,false);
// 圆心 链接 圆外边上结束的点，闭合才能画出扇形（2）
ctx3.lineTo(50, 50);
//上色
ctx3.fillStyle = "red";
ctx3.fill();
ctx3.closePath();

 

//空心和实心的组合

cxt.beginPath();
cxt.arc(20,20,10,0,PI*2,false);
cxt.fillStyle="red";
cxt.fill();
cxt.strokeStyle="green";
cxt.stroke();
cxt.closePath();

 

环形百分图如何用前端实现的，查了资料总结了以下2种方法，用多层div和canvas，

实例地址：http://play.163.com/special/tese-circle/

一:用多层div实现

需要三个层绝对定位，当中的2个层分别用clip盖住左边和右边，控制旋转角度，漏出最底部有颜色的环实现，附上代码：

.circle {width: 200px;height: 200px;position: relative;border-radius: 50%;background: #00b0f0;}
    .pie_left, .pie_right {width: 200px;height: 200px;position: absolute;top: 0;left: 0;}
    .left, .right {display: block;width:200px; height:200px;background:#bfbfbf;border-radius: 50%;position: absolute;top: 0;left: 0;}
    .pie_right , .right{clip:rect(0,auto,auto,100px);}
    .pie_left, .left {clip:rect(0,100px,auto,0);}
    .mask {width: 150px;height: 150px;border-radius: 50%;left: 25px;top: 25px;background: #FFF;position: absolute;text-align: center;line-height: 150px;font-size: 20px;font-weight: bold;}

<div class="circle"  data-num="25">
        <div class="pie_left">
            <div class="left"></div>
        </div>
        <div class="pie_right">
            <div class="right"></div>
        </div>
        <div class="mask">
            <span>25</span>
            %
        </div>
    </div>
function showCircle(){
            $(\'.circle\').each(function(index, el) {
                var num = $(this).find(\'span\').text() * 3.6;
                if (num<=180) {
                    $(this).find(\'.right\').css(\'transform\', "rotate(" + num + "deg)");
                } else {
                    $(this).find(\'.right\').css(\'transform\', "rotate(180deg)");
                    $(this).find(\'.left\').css(\'transform\', "rotate(" + (num - 180) + "deg)");
                };
            });
        }

View Code

 

二：用canvas实现

<div class="circular" data-percent="25">
            <canvas class="cvs" width="60" height="60"></canvas>
            <span class="num">25</span>
        </div>


function drawcanvas(){
    $(\'.circular\').each(function(index, el) {
        var p = $(el).attr(\'data-percent\');
        var angle = Math.PI*2*(p/100)-Math.PI/2;
        var cvs = $(el).find(\'.cvs\');
        var cxt=cvs[0].getContext("2d");

        cxt.lineWidth=5;
        cxt.strokeStyle="green";
        cxt.beginPath();
        cxt.arc(30,30,20,-Math.PI/2,angle,false);//顺时针，默认从3点钟方向开始
        cxt.stroke();//画空心圆
    })
}

参考网址：

网上插件：

网上插件：easypiechart.js

canvas  : http://www.365mini.com/page/html5-canvas-circle.htm

div ：http://codepen.io/anon/pen/JXqNvW