canvas绘制环形进度条


Posted in Javascript onFebruary 23, 2017

效果如下:

canvas绘制环形进度条

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
 <title>canvas绘制环形进度条</title>
 <style type="text/css">
 .chartbox{width: 100px;margin: 100px auto;}
 .myChart{width:100px;height: 100px;}
 </style>
</head>
<body>
 <div class="chartbox">
 <canvas class="myChart" id="myChart" width="100%" height="100%" data-total="100" data-curr="29.45"></canvas>
 </div>
 <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
 (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();
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery图片播放8款精美插件分享
Feb 17 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 #Javascript
js实现文字跑马灯效果
Feb 23 #Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 #Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 #Javascript
js模拟微博发布消息
Feb 23 #Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 #Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 #Javascript
You might like
php懒人函数 自动添加数据
2011/06/28 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python中sys.argv函数精简概括
2018/07/08 Python
python实现AdaBoost算法的示例
2020/10/03 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
地理科学专业毕业生求职信
2013/10/15 职场文书
前台文员岗位职责
2013/12/28 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
地球一小时倡议书
2014/04/15 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
党校个人总结
2015/03/04 职场文书
小学教师自我评价
2015/03/04 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
永不妥协观后感
2015/06/10 职场文书
新学期家长寄语2016
2015/12/03 职场文书
高一数学教学反思
2016/02/18 职场文书
图解上海144收音机
2021/04/22 无线电