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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
JavaScript的继承实现小结
May 07 Javascript
Vue计算属性的使用
Aug 04 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
微信小程序 两种为对象属性赋值的方式详解
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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python多继承顺序实例分析
2018/05/26 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python全栈之列表数据类型详解
2019/10/01 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
开会迟到检讨书
2014/01/08 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python