JQuery 写一个圆形动画加载进度条

drawProcess()这个方法主要是画圆的大小

上面所写到的 setInterval("addNum(90,100)",20); 分别指的是:

1.这里的三个参数分别是90:在90%处

2.100:圆的宽度（而<canvas>标签设置的高宽是不起作用的）

3.20:2秒之后执行这个addNum方法

一、画单色进度圆环，效果如下图:

<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Canvas绘图</title>
<script src=" http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<canvas class="process" width="100px" height="100px">0%</canvas>
</body>
<script>
$(document).ready(function() {
//drawProcess();i = 0;var t = setInterval("addNum(90,100)",20);
});
function addNum(percent,width) {if(i<percent){i++;$('canvas.process').text(i+"%");drawProcess(width);}else{clearInterval(t);}
}function drawProcess(width) {  $('canvas.process').each(function() {var text = $(this).text();var process = text.substring(0, text.length-1);   var canvas = this;  var context = canvas.getContext('2d');  context.clearRect(0, 0, width, width);  context.beginPath();  context.moveTo(width/2, width/2);  context.arc(width/2, width/2, width/2, 0, Math.PI * 2, false);  context.closePath();  context.fillStyle = '#ddd';  context.fill();  context.beginPath();  context.moveTo(width/2, width/2);    context.arc(width/2, width/2, width/2, 0, Math.PI * 2 * process / 100, false);  context.closePath();  context.fillStyle = '#2a2';  context.fill();   context.beginPath();  context.moveTo(width/2, width/2);  context.arc(width/2, width/2, width/2 - 10, 0, Math.PI * 2, true);  context.closePath();  context.fillStyle = 'rgba(255,255,255,1)';  context.fill();  context.beginPath();  context.arc(width/2, width/2, width/2 - 20, 0, Math.PI * 2, true);  context.closePath();  context.strokeStyle = '#ddd';  context.stroke();  context.font = "bold 9pt Arial";  context.fillStyle = '#2a2';  context.textAlign = 'center';  context.textBaseline = 'middle';  context.moveTo(width/2, width/2);  context.fillText(text, width/2, width/2);  });
}
</script>
</html>

二、画渐变色进度圆环，效果如下图:

<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Canvas绘图</title>
<script src=" http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<canvas class="process" width="100px" height="100px">0%</canvas>
</body>
<script>
$(document).ready(function() {
//drawProcess();  i = 0;  var t = setInterval("addNum(90,100)",20);
});
function addNum(percent,width) {  if(i<percent){  i++;  $('canvas.process').text(i+"%");  drawProcess(width);  }else{  clearInterval(t);  }
}
//设置外环的宽度(其实<canvas>设置的高宽是不起作用的，而是这里设置才会有用)
function drawProcess(width) {    $('canvas.process').each(function() {  var text = $(this).text();  var process = text.substring(0, text.length-1);     var canvas = this;    var context = canvas.getContext('2d');    context.clearRect(0, 0, width, width);    //环背景色context.beginPath();    context.moveTo(width/2, width/2);    context.arc(width/2, width/2, width/2, 0, Math.PI * 2, false);    context.closePath();    context.fillStyle = '#ddd';    context.fill();    //环前景色渐变色context.beginPath();    context.moveTo(width/2, width/2);      context.arc(width/2, width/2, width/2, Math.PI * 1.5, Math.PI * 1.5 * process / 100, false);    context.closePath();   var lGrd = context.createLinearGradient(0,0, 300, 300);  lGrd.addColorStop(0, '#ff0000');  lGrd.addColorStop(1, '#0000ff');  context.fillStyle = lGrd;  context.fill();     //设置内圆透明context.beginPath();    context.moveTo(width/2, width/2);    context.arc(width/2, width/2, width/2 - 10, 0, Math.PI * 2, true);    context.closePath();    context.fillStyle = 'rgba(255,255,255,1)';    context.fill();    //设置内环边框跟百分度context.beginPath();    context.arc(width/2, width/2, width/2 - 20, 0, Math.PI * 2, true);    context.closePath();    context.strokeStyle = '#ddd';    context.stroke();    context.font = "bold 9pt Arial";    context.fillStyle = '#2a2';    context.textAlign = 'center';    context.textBaseline = 'middle';    context.moveTo(width/2, width/2);    context.fillText(text, width/2, width/2);    });
}
</script>
</html>

三、<canvas>一些方法的用法

1、画渐变

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法：

context.createLinearGradient(x0,y0,x1,y1);

参数值

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

2、画圆弧

JavaScript 语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

如果想详细学习html <canvas>的用法的话可以http://www.w3school.com.cn/tags/html_ref_canvas.asp

JQuery 写一个圆形动画加载进度条相关推荐

html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
jquery ajax加载页面进度条,基于jQuery实现模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
[html] 请实现一个网站加载进度条
[html] 请实现一个网站加载进度条 import { memo } from 'react'; import { useLifecycles } from 'react-use'; import ...
NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...