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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • canvas实现弧形可拖动进度条效果

    canvas实现弧形可拖动进度条效果

    一.效果如下: 二. 本文是实现可拖动滑块实现的基本思路,及一个简单的dome,(https://github.com/pangyongsheng/canvas-arc-draw) 三. 1.首先在html中创建一个canvas标签 <canvas id="canvas"  width="400" height="400"></canvas> 2.创建一个进度条对象,编写初始化方法,获取canvas对象及上下文环境:eve

  • Android使用Canvas绘制圆形进度条效果

    Android使用Canvas绘制圆形进度条效果

    前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B

  • canvas绘制环形进度条

    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.

  • canvas实现环形进度条效果

    canvas实现环形进度条效果

    昨下午睡着了,晚上打开手机才发现朋友给我发了一个QQ消息,问我这个怎么实现? 这里就选canvas来简单写一下 先上代码,然后在说一说需要注意的点: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas环形进度条</title> <style> body{ background-color:#000; text-align:

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

    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; } in

  • Android自定义view实现圆环进度条效果

    Android自定义view实现圆环进度条效果

    本文实例为大家分享了Android自定义view实现圆环进度条效果的具体代码,供大家参考,具体内容如下 一.实现效果图 二.核心代码 自定义view的属性 <?xml version="1.0" encoding="utf-8"?> <resources>     <declare-styleable name="RingProgressBar">         <attr name="rin

  • JavaScript canvas绘制动态圆环进度条

    JavaScript canvas绘制动态圆环进度条

    本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码,供大家参考,具体内容如下 由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) {             /*                 @drawing_elem: 绘制对象                 @percent:绘制圆环百分比, 范围[0, 100]            

  • Android自定义View实现加载进度条效果

    上一篇文章总结了下自定义View的几个步骤,如果还有不清楚的同学可以先去看看Android自定义View(一),这篇文章和大家分享一下自定义加载进度条,效果如下 下面就以水平的进度条为列进行讲解: 1.首先还是在attrs.xml文件中自定义我们需要的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="GradientP

  • Android自定义View实现圆环进度条

    本文实例为大家分享了Android自定义View实现圆环进度条的具体代码,供大家参考,具体内容如下 效果展示 动画效果 View实现 1.底层圆环是灰色背景 2.上层圆环是红色背景 3.使用动画画一条弧线 View /** * 圆环进度条 */ public class RoundProgressBar extends View { //绘制矩形区域 private RectF rectF; //起始角度 private float startAngle; //扫过角度 private floa

  • Vue实现圆环进度条的示例

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类似圆环进度条的展示效果.天天跟数据打交道,天天跟接口打交道,项目做了不少,菜逼还是菜逼,都是泪啊! 其实说白了,是自己对canvas不熟,对CSS3不熟,所以就找了一个现成的轮子: <template> <div class="content" ref="box

  • Android自定义圆形进度条效果

    本文实例为大家分享了Android自定义圆形进度条效果的具体代码,供大家参考,具体内容如下 1 控件 RoundProgress package listview.tianhetbm.p2p.ui; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import a

  • JavaScript canvas绘制圆形加载进度条

    JavaScript canvas绘制圆形加载进度条

    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body {             text-align: center;         }         can

随机推荐