先看下效果

这是两个不同进度的进度条，由于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. linux挂载windows共享文件夹

    1.建立共享文件夹 2.在linux中挂载共享目录 #mount -t cifs -o username=administrator,password=你的系统账号密码 //192.168.0.22/ ...

  2. python（练习实例）

    Python 练习实例1 题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 我的代码:python 3+ #2017-7-20 list_h = [1,2,3,4 ...

  3. NVisionXR引擎基本介绍

    NVisionXR引擎基本介绍 一. 介绍 1.1 NVisionXR是什么?             NVisionXR引擎是全球首款跨平台多兼容的原生AR应用开发引擎,让AR应用开发更高效. 1. ...

  4. 移动端H5地图矢量SHP网格切分打包方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...

  5. 极其简单的帮你理解ORM中的关联关系

    ORM对象关系映射(英语:(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转 ...

  6. C语言博客作业—字符数组

    一.PTA实验作业 题目1:字符串转换成十进制整数 1. 本题PTA提交列表 2. 设计思路 (1)定义i为循环变量,number用于存放每一次转化的结果,flag用于判断是否为负数,p用于修改结果的 ...

  7. 安利给班里的大家一个chrome的GitHub插件-----gayhub

    title: 一个好用的Github插件--gayhub date: 2017-09-20 15:41:36 tags: --- 别跑, 这真是正经插件. 效果, 一图流: 具体效果在项目地址很详细 ...

  8. bzoj千题计划276：bzoj4515: [Sdoi2016]游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=4515 把lca带进式子,得到新的式子 然后就是 维护树上一次函数取min 一个调了一下午的错误: 当 ...

  9. nyoj水池数目

    水池数目 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地 ...

  10. Linux系统把/home重新挂载到其他硬盘或分区

    一开始没有做好规划,导致/home空间不足,再加上分区表不是GPT,导致无法扩展超过2T,因此需要重新划分一块更大的硬盘给/home. 1.把新挂载的4T硬盘进行分区和格式化 2.创建目录 sudo ...