先看下效果

这是两个不同进度的进度条，由于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. JDK1.8源码(五)——java.util.ArrayList 类

    关于 JDK 的集合类的整体介绍可以看这张图,本篇博客我们不系统的介绍整个集合的构造,重点是介绍 ArrayList 类是如何实现的. 1.ArrayList 定义 ArrayList 是一个用数组实 ...

  2. HttpServletRequest对象方法的用法

    1. 获得客户机信息    getRequestURL方法返回客户端发出请求时的完整URL.    getRequestURI方法返回请求行中的资源名部分.    getQueryString 方法返 ...

  3. 1. 初识 Lucene

    在学习Lucene之前呢,我们当然首先要了解下什么是Lucene. 0x01 什么是Lucene ? Lucene是一套用于全文检索和搜索的开放源代码程序库,由Apache软件基金会支持和提供. Lu ...

  4. QueryBuilder 前端构造SQL条件的插件使用方法

    页面引入JS等: <script type="text/javascript" src="/qysds-jx/pages/gzrw/js/jquery.js&quo ...

  5. SQL中的DML、DDL以及DCL

    DML(data manipulation language)是数据操纵语言:它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作的 ...

  6. java基础笔记（3）----函数

    前言引入函数前,所有的代码都写在main主函数中,代码过多,代码冗余,可读性差. 引入函数后,函数是实现某一特定功能的代码块.一个类中可以定义多个函数,每个函数和main主函数都是并列关系. 函数: ...

  7. Java字符串的split(String str)方法空串的问题

    String strs[] = "SS1BB2CC3".split("\\D+"); public static String Test(){ Date d = ...

  8. 假设检验（Hypothesis Testing）

    假设检验(Hypothesis Testing) 1. 什么是假设检验呢? 假设检验又称为统计假设检验,是数理统计中根据一定假设条件由样本推断总体的一种方法. 什么意思呢,举个生活中的例子:买橘子(借 ...

  9. 201621123040《Java程序设计》第13周学习总结

    1.本周学习总结 2.为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 2.1简述你想为你的系统增加什么网络功能?设计思路是什么? 创建服务器端端口(3333),当用户以客户端身份访问 ...

  10. 冲刺每日报告--Day1

    敏捷冲刺每日报告--Day1 情况简介 由于李世钰同学出差了,周六才能回来.所以我们只能先写爬虫,封装代码提供接口等他回来调用. 任务进度 赵坤:编写了基本爬虫代码,目前能在国内有版权的B站.爱奇艺中 ...