环形进度条（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>
分手后的思念是犯贱
- 日理万妓
爱被打了一巴掌
╰+攻爆jí腚メ
还没有评论，来说两句吧...