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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
JS高级笔记
Jul 13 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
UCenter Home二次开发指南
2009/05/28 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScript中的闭包介绍
2015/03/15 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
为Python程序添加图形化界面的教程
2015/04/29 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
浅析使用Python操作文件
2017/07/31 Python
详解Python进程间通信之命名管道
2017/08/28 Python
vscode 远程调试python的方法
2017/12/01 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
测试驱动开发的主要步骤是什么
2014/12/10 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
质量承诺书范文
2014/03/27 职场文书
十佳护士先进事迹
2014/05/08 职场文书
教师党员个人总结
2015/02/10 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2016公司年会主持词
2015/07/01 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js