平武建站

使用canvas绘制一个环形进度条效果

今天就跟大家聊聊有关使用canvas绘制一个环形进度条效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

目前创新互联公司已为千余家的企业提供了网站建设、域名、网络空间、网站运营、企业网站设计、靖州网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

代码如下：




 
 
 
 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绘制一个环形进度条效果

看完上述内容，你们对使用canvas绘制一个环形进度条效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


文章题目：使用canvas绘制一个环形进度条效果
新闻来源：http://pwwzsj.com/article/gopdgh.html

其他资讯