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.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
javascript常用的设计模式
Feb 09 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
JavaScript分页组件使用方法详解
Jul 26 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
PHP中的self关键字详解
2019/06/23 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
JS文本框默认值处理详解
2013/07/10 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Python查看微信撤回消息代码
2018/06/07 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
python中最小二乘法详细讲解
2021/02/19 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
多媒体教室标语
2014/06/26 职场文书
文员岗位职责
2015/02/04 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang