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中的parseInt使用技巧
Sep 03 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
javascript实现拼图游戏
Jan 29 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对象Object的概念 介绍
2012/06/14 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python万年历实现代码 含运行结果
2017/05/20 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
关于读书的演讲稿1000字
2014/08/27 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
承诺函格式模板
2015/01/21 职场文书
前台接待岗位职责
2015/02/03 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android