您的位置：首页 > Web前端 > JQuery

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

2016-02-04 10:40 495 查看

<!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="<span style="color:#FF0000;">200px</span>" height="<span style="color:#FF0000;">200px</span>">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>

drawProcess()这个方法主要是画圆的大小,参数就是圆的宽度,而在上面的<canvas>中的宽度则不是准确的,主要看的是drawProcess(width)这里传的width

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

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

2.100:圆的宽度

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

效果图:

而且他进入页面加载的时候是会进行动态滚动到90%的位置

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航