Flask接口签名sign原理与实例代码浅析
217
2023-06-08
canvas绘制环形进度条
效果如下:
代码如下:
.chartbox{width: 100px;margin: 100px auto;}
.myChart{width:100px;height: 100px;}
(function($, window, undefined) {
$.fn.ringChart = function(options) {
var defaults = { };
var settings = $.extend({}, defaults, options);
var canvas = $(this).get(0);
var total = $(this).attr("data-total");
var curr = $(this).attr("data-curr");
var constrast = parseFloat(curr/total).toFixed(2); //比例
var context = null;
if ( !canvas.getContext) {
return;
}
// 定义开始点的大小
var startArc = Math.PI*1.5;
// 根据占的比例画圆弧
var endArc = (Math.PI * 2) * constrast;
context = canvas.getContext("2d");
// 圆心文字
context.font="28px Arial";
context.fillStyle = '#ff801a';
context.textBaseline = 'middle';
var text=(Number(curr/total)*100).toFixed(0)+"%";
var tw=context.measureText(text).width;
context.fillText(text,50-tw/2,50);
// 绘制背景圆
context.save();
context.beginPath();
context.strokeStyle = "#e7e7e7";
context.lineWidth = "4";
context.arc(50, 50, 44, 0, Math.PI * 2, false);
context.closePath();
context.stroke();
context.restore();
// 若为百分零则不必再绘制比例圆
if ( curr / total == 0) {
return;
}
// 绘制比例圆
context.save();
context.beginPath();
context.strokeStyle = "#ff801a";
context.lineWidth = "4";
context.arc(50, 50, 44, startArc, (curr % total == 0 ? startArc : (endArc+startArc)), false);
context.stroke();
context.restore();
}
})($, window);
$("#myChart").ringChart();
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~