环形进度条（jQuery，canvas）

接到了一个在手机app上绘制圆环进度条的需求。找了很多插件都不是很满意，就自己用jQuery+canvas画了一个。
最终效果图
这里写图片描述
完整代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script src="js/jquery.min.js"></script>

    <style type="text/css">
        canvas {
            border: 1px solid black;
        }

        .inner_sub_div{
            text-align: center;
            margin-bottom: 10px;
            font-size: 30px;
        }

    </style>        
    </head>
    <body>

<div id="yCancasDivId" style="width:300px ;height: 300px;">

</div>

    </body>

<script type="text/javascript">

(function($) {
/*!
 * nayi_224
 * 2018/08/02
 *
 */
    $.fn.singlePie = function(options) {

        options = options || {};

        var innerDivHtml = "";
        var innerDivId = guid();
        innerDivHtml += "<div id=\"" + innerDivId + "\" style=\"position: absolute;z-index: 99;top: 150px;left: 150px\"></div>";
        jQuery(this).append(innerDivHtml);
        var jInnerDiv = jQuery("#" + innerDivId);

        var canvasHtml = "";
        var canvasId = guid();
        canvasHtml += "<canvas id=\"" + canvasId + "\" width=\"300px\" height=\"300px\"></canvas>";
        jQuery(this).append(canvasHtml);
        var canvas = jQuery("#" + canvasId)[0];
        var jCanvas = jQuery("#" + canvasId);


        var cc = canvas.getContext("2d");
        if(!canvas.getContext) return;

        var c_height = jCanvas.height();
        var c_width = jCanvas.width();

        var r = (c_height > c_width ? c_width : c_height) / 2 * 0.9;

        var num = options.num || 0;

        cc.beginPath();
        cc.lineWidth = options.lineWidth || 5;

        cc.strokeStyle  = options.lineColor || "#f35444";
        cc.arc(c_width / 2, c_height / 2, r, Math.PI / 2 * 3, Math.PI / 2 * (3 + (num / 100) * 4), false);
        cc.stroke();
        cc.closePath();


        cc.beginPath();
        cc.strokeStyle = options.spaceColor || "#f3f3f3" ;
        cc.arc(c_width / 2, c_height / 2, r, Math.PI / 2 * (3 + (num / 100) * 4), Math.PI / 2 * 7, false);
        cc.stroke();
        cc.closePath();  


        var innerDivWidth = jInnerDiv.width();
        var innerDivHeight = jInnerDiv.height();

        jInnerDiv.append(options.innerHtml);
        jInnerDiv.css("top", (jCanvas.height() / 2 - jInnerDiv.height() / 2) + "px");
        jInnerDiv.css("left", (jCanvas.width() / 2 - jInnerDiv.width() / 2) + "px");

        //console.log(innerDivId);
        //console.log(options.innerHtml);

        function S4() {
            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
        }
        function guid() {
            return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
        }

    };
})(jQuery);


    var options = {
        num: 60,        //数字，用于计算百分比
        innerHtml: function(){
            var temp = "";
            temp += "<div class='inner_sub_div' >60</div>"
            temp += "<div class='inner_sub_div' >描述</div>"
            return temp;
        },              //描述
        lineWidth: 5,   //线宽度
        lineColor: "#f35444",   //线颜色
        spaceColor: "#f3f3f3"   //透明线颜色
    };

    jQuery("#yCancasDivId").singlePie(options);
</script>   
</html>
环形进度条（jQuery，canvas）

猜你喜欢
