canvas画圆动态显示百分比
2017-01-10 20:50
337 查看
circle.js
var circleTimer; var circleFlag = false; var circle = { run:function(opts) { if(!opts.id) throw new Error("must be canvas id."); //暂不能用jq的$获取canvas var canvas = document.getElementById(opts.id), ctx; if(canvas && (ctx = canvas.getContext("2d"))) { canvas.width = canvas.height = "300"; var noop = function(){}; var before = opts.onBefore || noop; var ringDo = opts.onRingDo || noop; var after = opts.onAfter || noop; before(ctx); var step = opts.step || 1; var delay = opts.delay || 100; var myRageNow = 0; var myStepNow = 0; var myRage = 360 * (opts.percent || 0); var sRage = -Math.PI * 0.5; var doDraw = function() { circleFlag = true; myRageNow += step; myStepNow += step; if(myRageNow <= myRage) { if(myStepNow == 361) { myStepNow = 1; ringDo(ctx); } ctx.fillStyle = opts.color || '#f76220'; ctx.beginPath(); ctx.moveTo(150, 150); ctx.arc(150, 150, 150, sRage, Math.PI * 2 * (myStepNow/360) + sRage); ctx.fill(); circleTimer = setTimeout(doDraw, delay); } else { circleFlag = false; after(ctx); } }; doDraw(); } } }; //将百分比转换成小数 function percentTofloat(km) { if(km.substring(km.length-1,km.length)=="%") { km = km.substring(0,km.length-1); km = km/100; } return km; } //绑定控件,启动转动 function circleBind(my_id,my_percent) { circle.run( { id:my_id, percent: percentTofloat(my_percent), onBefore:function(ctx){ ctx.fillStyle = '#e8e8e8'; ctx.beginPath(); ctx.moveTo(150, 150); ctx.arc(150, 150, 150, 0, Math.PI * 2); ctx.fill(); }, onRingDo:function(ctx){ ctx.fillStyle = '#e8e8e8'; ctx.beginPath(); ctx.moveTo(150, 150); ctx.arc(150, 150, 150, 0, Math.PI * 2); ctx.fill(); } }); } //停止转动 function circleStop() { clearTimeout(circleTimer); } //获取控件状态 function circleStatus() { return circleFlag; }
circle.css
@charset "utf-8"; /* CSS Document */ .round-wrap{ display:block; position:relative; width:100px; height:100px; overflow:hidden; border-radius:65px; -webkit-border-radius:65px; } .round-sector{ position:absolute; width:100px; height:100px; } .round-bg { position:absolute; width:100px; height:100px; background-color:#f76220; border-radius:65px; -webkit-border-radius:65px; } .round-circle{ position:absolute; background-color:#FFF; width:94px; height:94px; left:2.5px; top:2.5px; z-index:10; border-radius:60px; -webkit-border-radius:60px; } .round-circle p{ font-size:14px; line-height:94px; margin:0; text-align:center; width:100%; font-weight:bold; }
html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas画圆动态显示百分比</title> <link type="text/css" rel="stylesheet" href="css/circle.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div class="round-wrap"> <div class="round-bg"></div> <canvas id="crl0" class="round-sector"></canvas> <div class="round-circle"><p>2</p></div> </div> <div class="round-wrap"> <div class="round-bg"></div> <canvas id="crl1" class="round-sector"></canvas> <div class="round-circle"><p>60%</p></div> </div> <div class="round-wrap"> <div class="round-bg"></div> <canvas id="crl2" class="round-sector"></canvas> <div class="round-circle"><p>0.89</p></div> </div> <script type="text/javascript" src="js/circle.js"></script> <script> $(document).ready(function() { circleBind("crl0","2"); circleBind("crl1","60%"); circleBind("crl2","0.89"); }); </script> </body> </html>
相关文章推荐
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- 异步加载动态进度条,显示百分比
- 画圆带动态边框圆中间显示百分比跟随边框动
- 微信小程序canvas 画动态圆环百分比进度条实例 根据手机屏幕宽度自适应放大缩小
- 多彩百分比 动态进度条 投票效果显示(jquery)
- <canvas>+JS如何实现可拖拽并且显示百分比的环形进度条
- H5动画,canvas绘制圆环百分比进度的动态效果
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- 动态显示百分比的圆形
- 简单的Loader加载动态百分比显示
- JavaWeb项目实现上传文件动态显示进度百分比
- html5<canvas操作像素之添加杂色,动态倒影逐行显示>
- 异步加载动态进度条,显示百分比
- Android NumberProgressBar:动态移动显示百分比进度的进度条
- 百分比圆环进度动态显示
- 使用canvas在一张图片上动态显示文字信息,并支持图片下载。
- canvas绘制动态加载圆形百分比
- H5动画,canvas绘制圆环百分比进度的动态效果
- canvas绘制圆环百分比进度的动态效果
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码