环形进度条（jQuery，canvas）

59 阅读 0 评论 39 点赞

我是靠谱客的博主震动鼠标，最近开发中收集的这篇文章主要介绍环形进度条（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>