资讯

精准传达 • 有效沟通

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

网站建设 >

查看其它板块

使用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
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

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

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

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
双流能亿建站网站运维托管成都网站建设公司友益建筑机械凿Android开发无边发光字成都网站改版成都婚庆策划马边网站建设响应式建站

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

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

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