欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

环形进度条(jQuery,canvas)

程序员文章站 2024-02-02 12:30:46
...

接到了一个在手机app上绘制圆环进度条的需求。找了很多插件都不是很满意,就自己用jQuery+canvas画了一个。

最终效果图
环形进度条(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>
相关标签: canvas jQuery