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 相关文章推荐
jQuery判断元素是否存在的可靠方法
May 06 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
微信小程序页面上下滚动效果
Nov 18 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
php压缩文件夹最新版
2018/07/18 PHP
php实现简单四则运算器
2020/11/29 PHP
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
餐饮主管岗位职责
2013/12/10 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
英语教师岗位职责
2014/03/16 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
政协会议宣传标语
2014/10/09 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
张丽莉观后感
2015/06/16 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang