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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
javascript中的with语句学习笔记及用法
Feb 17 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.ini中文版(1)
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
js常见表单应用技巧
2008/01/09 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
python求crc32值的方法
2014/10/05 Python
python实现网站的模拟登录
2016/01/04 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
关于.NET, HTML的五个问题
2012/08/29 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
八项规定整改方案
2014/02/21 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
专职安全员岗位职责
2015/04/11 职场文书
暑假打工感想
2015/08/07 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python