资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用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://cdkjz.cn/article/gopdgh.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
广汉做网站成都网站建设微信小程序绵阳梓潼做网站LED亮化工程成都路面机械设备教育网站设计方案网站收录官网SEO排名成都LED亮化工程

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图