CARVARS 圆形进度条
先看下效果
这是两个不同进度的进度条,由于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 圆形进度条的更多相关文章
- android 自定义控件——(四)圆形进度条
----------------------------------↓↓圆形进度条(源代码下有属性解释)↓↓---------------------------------------------- ...
- WPF 实现圆形进度条
项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现. 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: ...
- html5 svg 圆形进度条
html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- canvas圆形进度条
通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...
- iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
Android 高手进阶(21) 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明地址:http://blog.csdn.net/xiaanming/article/detail ...
- Qt之QRoundProgressBar(圆形进度条)
简述 QRoundProgressBar类能够实现一个圆形进度条,继承自QWidget,并且有和QProgressBar类似的API接口. 简述 详细说明 风格 颜色 字体 共有函数 共有槽函数 详细 ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- Android 带进度的圆形进度条
最近项目有个需求,做带进度从下到上的圆形进度条. 网上查了一下资料,发现这篇博客写得不错http://blog.csdn.net/xiaanming/article/details/10298163 ...
随机推荐
- 4.Apache POI使用详解
一.POI结构与常用类 1.POI介绍 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. .NET的开发人 ...
- Java几种建立实例的方法
1.new something obj=new something(); 2.clone 根据现有的对象实例来建立里一个新对象实例. 只限于实现了java.lang.Cloneable接口的类.否 ...
- [css 实践篇] 解决悬浮的<header> <footer>遮挡内容的处理技巧
我写的实践篇 都是自己在实践项目所遇到的 "拦路虎" 还是很有借鉴的意义的.(实践才是检验真理的唯一标准呀),废话不多说,进去正题 position: fixed 绝对固定底部后会 ...
- Laravel 中缓存驱动的速度比较
缓存是web开发中重要的一部分,我相信很多人和我一样,经常忽略这个问题. 随着工作经验的累积,我已经意识到缓存是多么的重要,这里我通过 Scotch 来解释一下它的重要性. 通过观察发现,Scotch ...
- 设计模式之迭代器模式详解(foreach的精髓)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 各位好,很久没以LZ的身份和 ...
- xilinx和altera复位电平
xilinx使用高电平复位 altera使用低电平复位 原因:Xilinx 寄存器的SR控制端是高电平有效的.如果RTL代码采用了低电平有效的复位模式,综合器将在复位信号驱动寄存器SR控制端之前的插入 ...
- 读论文系列:Object Detection CVPR2016 YOLO
CVPR2016: You Only Look Once:Unified, Real-Time Object Detection 转载请注明作者:梦里茶 YOLO,You Only Look Once ...
- lambda及参数绑定
一.介绍 对于STL中的算法,我们都可以传递任何类别的可调用对象.对于一个对象或一个表达式,如果可以对其使用调用运算符,则称它为可调用的.即,如果e是一个可调用的表达式,则我们可以编写代码e(ar ...
- css3 文字的设置
1.text-shadow 有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选) .text11{text-shadow: 3px 3px 5px #f00 ;col ...
- 数据故障的恢复-MSSQL ndf文件大小变为0 KB恢复过程
一.故障描述 成都某客户,存储损坏,数据库崩溃.重组存储,恢复数据库文件,发现有四个ndf文件大小变为0 KB.数据库大小约80TB.数据库中有1223个文件,数据库每10天生成一个NDF文件,每个N ...