先看下效果

这是两个不同进度的进度条，由于carvas用找的只是id所以下面想多个进度条必须要根据class来找到id，所以我封装了一个进度条的函数，下面的代码直接复制粘贴就可以了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<canvas class="can" jd="60" id="myCanvas" width="120px" height="120px" style="border: 1px solid red;"></canvas>
<canvas class="can" jd="10" id="myCanvas1" width="120px" height="120px" style="border: 1px solid red;"></canvas>
<script type="text/javascript">

var can =document.getElementsByClassName("can");
for(var i= 0;i<can.length;i++){
var arry =can[i].getAttribute("id");
var jd=can[i].getAttribute("jd");
canvars(arry,jd)
}
function canvars(el,jd){ //封装画圆函数
var circle = {x : 60, y :60, r : 50 };
var start =-Math.PI / 2 ;
var j=0;
var time;

var cvsElement = document.getElementById(el);

var ctx=cvsElement.getContext("2d");

time =setInterval(function(){

ctx.clearRect(0,0,400,300);
ctx.beginPath();
ctx.strokeStyle = "#f1f1f1";
ctx.lineWidth=10;

ctx.arc(circle.x, circle.y, circle.r, start,Math.PI*2, false);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth=10;
ctx.arc(circle.x, circle.y, circle.r, start,start+Math.PI/180*j, false);
ctx.stroke();
if(j>=jd*360/100){
clearInterval(time);
timer=null;
}
j++;
},1)

}

</script>
</body>
</html>

CARVARS 圆形进度条的更多相关文章

  1. android 自定义控件——（四）圆形进度条

    ----------------------------------↓↓圆形进度条(源代码下有属性解释)↓↓---------------------------------------------- ...

  2. WPF 实现圆形进度条

    项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现. 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: ...

  3. html5 svg 圆形进度条

    html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  5. iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. Android 高手进阶之自定义View，自定义属性（带进度的圆形进度条）

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...

  7. Qt之QRoundProgressBar（圆形进度条）

    简述 QRoundProgressBar类能够实现一个圆形进度条,继承自QWidget,并且有和QProgressBar类似的API接口. 简述 详细说明 风格 颜色 字体 共有函数 共有槽函数 详细 ...

  8. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  9. Android 带进度的圆形进度条

    最近项目有个需求,做带进度从下到上的圆形进度条. 网上查了一下资料,发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163 ...

随机推荐

  1. Algorithm --> 阶乘和因子

    阶乘和因子 要求:输入正整数n(1<n <101), 把阶乘n!=1x2x3x...xn分解成素因子相乘的形式,从小到大输出各个素数(2,3,5,...)的指数. 例如825=3x52x1 ...

  2. 关于换了手机后，导致原来连的fiddler抓不到新手机上的包的解决方法

    原来我们测试都是一台安卓机,一台ios机,由于机子不够,所以安卓机都是自己的手机,可以连内网,也可以连外网 但是最近这几天,不知道公司抽了什么风.把网都给限制了,只有公司的测试机,才能连内网测,结果我 ...

  3. C++标准库vector类型的使用和操作总结

    vector是一种类型对象的集合,它是一种顺序容器,容器中的所有对象必须都是同一种类型.想了解顺序容器的更多内容:C++顺序容器知识总结.vector的对象是可以动态生长的,这说明它在初始化时可以不用 ...

  4. 【ASP.NET Core】如何隐藏响应头中的 “Kestrel”

    全宇宙人民都知道,ASP.NET Core 应用是不依赖服务器组件的,因此它可以独立运行,一般是使用支持跨平台的 Kestrel 服务器(当然,在 Windows 上还可以考虑用 HttpSys,但要 ...

  5. Tomcat优化内存以及连接数

    公司的一个服务器使用Tomcat6默认配置,在后台一阵全点击服务器就报废了,查了一下就要是PERMSIZE默认值过小造成(16-64) TOMCAT_HOME/bin/catalina.sh 添加一行 ...

  6. Spring MVC的handlermapping之RequestMappingHandlerMapping初始化

    RequestMappingHandlerMapping:这个handlerMapping是基于注解的同样,先上类图: 通过类图可以看到,同样是继承父类 AbstractHandlerMapping来 ...

  7. Notepad++中实现Markdown语法高亮与实时预览

    Notepad ++是一个十分强大的编辑器,除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码.Notepad ++不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的 ...

  8. .Net开发之旅（一个年少轻狂的程序员的感慨）

    高端大气上档次.这次当时一个身为懵懂初中生的我对程序员这一职位的描述.那时虽不是随处都能看到黑客大军的波及,但至少是知道所谓的黑客爸爸的厉害,一言不合说被黑就被黑.对于懵懂的我那是一种向往.自己也曾想 ...

  9. 需求分析&原型设计

    需求分析&原型设计 需求分析 访问软件项目真实用户 首先本项目的用户是这个需要做简单四则运算的用户(我们团队通过对家里有三四年级小学生(需要做简单四则运算)的简单采访):反映了几个主要的问题: ...

  10. 基于微信小程序的失物招领系统的Postmortem

    基于微信小程序的失物招领系统的Postmortem 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 对于我们团队要解决的问题和实现的功能在项目开始就 ...