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

来源：互联网发布：java获取json对象的值编辑：程序博客网时间：2024/04/30 02:23

<!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%的位置

0 0