canvas实现简易的圆环进度条效果


Posted in Javascript onFebruary 28, 2017

效果图:

canvas实现简易的圆环进度条效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <style type="text/css">
 canvas{
  border: 1px solid #1F232A;
 }
 .div{
  width: 400px;
  height: 50px;
 }
 input,button{
  text-align: center;
  font-size: 20px;
 }
 </style>
 <body>
 <canvas id="main" width="450" height="300"></canvas>
 <div class="div">
 进度:<input id="num" type="number" value="100" max="100"/>
 <button id="makeSure">确定</button>
 </div>
 </body>
 <script type="text/javascript">
 var makeSure=document.getElementById("makeSure");
 makeSure.onclick=function(){
  var ctx=document.getElementById("main").getContext("2d");
  ctx.clearRect(0,0,450,300);
  var num=parseInt(document.getElementById("num").value)+1;
  if(num<=101){
  for (var x=0;x<num;x++) {
  (function(x){
     setTimeout(function(){
      ctx.beginPath()
      ctx.lineWidth=10;
   ctx.strokeStyle='orange';
   ctx.arc(200, 200, 50, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
     ctx.stroke();
      ctx.clearRect(390,25,50,50);
      ctx.clearRect(175,175,55,55)
       ctx.fillStyle = 'orange';
   ctx.fillRect(10+x*3.5,30,3.5,40);
   ctx.font="20px Arial";
   ctx.fillText(x+"%",390,58)
   ctx.fillText(x+"%",175,208)
     },x*30); 
   })(x);
  }
  }else{
  alert("请输入0-100之间的数字")
  }
 }
 makeSure.click();
 </script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 #Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 #Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 #Javascript
canvas红包照片实例分享
Feb 28 #Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 #Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 #Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 #Javascript
You might like
php判断当前操作系统类型
2015/10/28 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python中IPYTHON入门实例
2015/05/11 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python实现名片管理系统项目
2019/04/26 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python按比例随机切分数据的实现
2019/07/11 Python
html5 标签
2009/07/16 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
4s店总经理岗位职责
2013/12/31 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
优秀家长事迹材料
2014/05/17 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书