先看下效果

这是两个不同进度的进度条，由于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. spring整合springmvc和hibernate

    上篇文章使用maven搭建了web环境,这篇来记录下如何使用spring整合springmvc和hibernate,亦即spring+springmvc+hibernate框架整合. 第一步:首先配置 ...

  2. 论文阅读——Visual inertial odometry using coupled nonlinear optimization

    简介:论文提出一种新的视觉里程计算法,其直接利用带噪声的IMU数据和视觉特征位置来优化相机位姿.不同于对IMU和视觉数据运行分离的滤波器,这种算法将它们纳入联合的非线性优化框架中.视觉特征的透视重投影 ...

  3. RabbitMQ封装实战

    先说下背景:上周开始给项目添加曾经没有过的消息中间件.虽然说,一路到头非常容易,直接google,万事不愁~可是生活远不仅是眼前的"苟且".首先是想使用其他项目使用过的一套对mq封 ...

  4. node初始

    ### 一.什么是node.js > Node是一个基于 Chrome V8 引擎的 JavaScript 运行环境 > > Node使用了一个事件驱动.非阻塞式 I/O 的模型,使 ...

  5. 【总结】关于YUV-RGB格式转换的一些个人理解

    这段时间一直在研究YUV的格式问题例如YUV422.YUV420,在网上搜索了很多这方面的资料,发现很多资料讲的东西是重复的,没有比较深入的讲解,所以看了之后印象不是很深,过了一段时间之后又对它们有了 ...

  6. C语言——总结回顾

    1.当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么? 你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗? 为什么? 答:①当初选择计算机专业是出于一种选择,是一种带着冲 ...

  7. CPP 栈 示例

    #include<iostream> #include<stdlib.h> using namespace std; typedef struct node { int dat ...

  8. Linux 复习

    shift + control + +  终端窗口放大 control + -   终端窗口缩小 ls -alh > laowang.txt 重定向,并覆盖源文件内容 ls -alh >& ...

  9. ubuntu1604使用源码方式安装ruby2.5.0

    本文介绍ubutntu1604环境下源代码方式安装ruby 版本2.5.0 如果内存小于2G可以开启虚拟内存,下面的命令开启4G虚拟内存 sudo dd if=/dev/zero of=/swap b ...

  10. JSONP 详解

    1.什么是JSONP ? JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实 ...