js实现圆环进度条

在runjs.cn上找了段代码,不过作者有意卖萌,有意复杂化代码。我需要的只是从0到100%的加载,加载到100%就停止,不要再乱动!

效果图:

放码过来:


 1 window.onload = function(){
2 //canvas initialization
3 var canvas = document.getElementById("canvas");
4 var ctx = canvas.getContext("2d");
5 //dimensions
6 var W = canvas.width;
7 var H = canvas.height;
8 //Variables
9 var degrees = 0;
10 var new_degrees = 0;
11 var difference = 0;
12 var color = "green"; //green looks better to me
13 var bgcolor = "#E8E8E8";
14 var text;
15 var animation_loop, redraw_loop;
16
17 function init()
18 {
19 //Clear the canvas everytime a chart is drawn
20 ctx.clearRect(0, 0, W, H);
21
22 //Background 360 degree arc
23 ctx.beginPath();
24 ctx.strokeStyle = bgcolor;
25 ctx.lineWidth = 10; //预填充环的宽度
26 ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); //you can see the arc now
27 ctx.stroke();
28
29 //gauge will be a simple arc
30 //Angle in radians = angle in degrees * PI / 180
31 var radians = degrees * Math.PI / 180;
32 ctx.beginPath();
33 ctx.strokeStyle = color;
34 ctx.lineWidth = 10; //填充环的宽度
35 //The arc starts from the rightmost end. If we deduct 90 degrees from the angles
36 //the arc will start from the topmost end
37 ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false);
38 //you can see the arc now
39 ctx.stroke();
40
41 //Lets add the text
42 ctx.fillStyle = color;
43 ctx.font = "50px bebas";
44 text = Math.floor(degrees/360*100) + "%";
45 //Lets center the text
46 //deducting half of text width from position x
47 text_width = ctx.measureText(text).width;
48 //adding manual value to position y since the height of the text cannot
49 //be measured easily. There are hacks but we will keep it manual for now.
50 ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
51 }
52
53 function draw()
54 {
55 //Cancel any movement animation if a new chart is requested
56 if(typeof animation_loop != undefined) clearInterval(animation_loop);
57 new_degrees=new_degrees+1;
58 difference = new_degrees - degrees;
59 animate_to();
60 }
61
62 //function to make the chart move to new degrees
63 function animate_to()
64 {
65 //clear animation loop if degrees reaches to new_degrees
66 if(degrees == new_degrees)
67 clearInterval(animation_loop);
68
69 if(degrees==360)//如果加载到了360度,就停止
70 return;
71
72 if(degrees < new_degrees)
73 degrees++;
74 else
75 degrees--;
76
77 init();
78 }
79
80 //调用各个函数,实现动态效果
81 draw();
82 redraw_loop = setInterval(draw, 10); //Draw a new chart every 2 seconds
83
84 }

时间: 05-04

js实现圆环进度条的相关文章

两种CSS3圆环进度条详解

晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第一种:通过overflow溢出隐藏的方式: 这种方法好处在于容易理解,只需要一层一层的嵌套,即可得到效果,但是实现起来较为繁琐,HTML的结构也比较冗余. 先看HTML结构: <div class="circle-one"> <div class="circle

svg实现圆环进度条

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>圆环进度条</title> <style type="text/css"> circle{ -webkit-transition: stroke-dasharray .25s; transition: stroke-dasharray .25s; } </s

ProgressWheel:Android开源圆环进度条

这是一个自定义Android组件,用于代替标准进度条组件.实现各种进度条样式,包括圆环,扫描等. XML: 在你的attr.xml(res/value)中加入以下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <declare-styleable name="ProgressWheel"> <attr name="text"format="string"/> <attr name=&q

用Raphael在网页中画圆环进度条

原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆 放就不太好看了.随着css3的出现,圆环状的进度条开始用得越来越多,不过由于IE6/7/8不支持css3,我们只能换其它方法来实现.本文就采用 Raphael来画一个,这个组件对svg和vml进行了一个统一的封装,根据浏览器使用不同的技术实现绘制,因此IE也能用. 先上效果图: 效果还不错吧?代码其实也不复杂,抛砖引玉一下

JS网页顶部进度条demo

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面加载进度条</title> <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></

pace.js – 加载进度条插件

这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约.闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色! 调用方法: 引入

JS框架_(Progress.js)圆形动画进度条

圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> p { position: fixed; top: 50%; left: 0; right: 0; text-align: center; transf

android自定义渐变圆环进度条

先看下效果: 分析:比较常见于扫描结果.进度条等场景 利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变 同样的道理,可以画出长条进度条,扇图饼图等,感兴趣可以试下.. package com.liujing.progressviewdemo; /*** *

ios 画圆环进度条

#import <UIKit/UIKit.h> @interface SNCircleProgressView : UIView /** * 进度值0-1.0之间 */ @property (nonatomic,assign)CGFloat progressValue; /** * 边宽 */ @property(nonatomic,assign) CGFloat progressStrokeWidth; /** * 进度条颜色 */ @property(nonatomic,strong)UI