使用canvas绘制一个环形进度条效果-创新互联
今天就跟大家聊聊有关使用canvas绘制一个环形进度条效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联专注于企业
成都全网营销推广、网站重做改版、亳州网站定制设计、自适应品牌网站建设、
H5高端网站建设、
商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为亳州等各大城市提供网站开发制作服务。
代码如下：
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();
效果如下：
看完上述内容，你们对使用canvas绘制一个环形进度条效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联网站建设公司行业资讯频道，感谢大家的支持。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：使用canvas绘制一个环形进度条效果-创新互联
文章起源：http://kswjz.com/article/doeoih.html
