圆形进度条

来源：互联网发布：教务系统uc矩阵编辑：程序博客网时间：2024/05/17 03:11

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<canvas id="process" width="48px" height="48px">61%</canvas>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
loadCanvas(0.8,0.61);
});
function draw(current,ratio) {
var text = $("#process").text();
var process = text.substring(0, text.length-1);
var context = document.getElementById("process").getContext('2d');
context.clearRect(0, 0, 48, 48);
context.beginPath();
context.moveTo(24,24);
context.arc(24, 24, 24, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = '#ddd';
context.fill();

context.beginPath();
context.moveTo(24,24);
context.arc(24, 24, 24,-0.5 * Math.PI, current* (Math.PI*2*ratio) - Math.PI/2, false);
context.closePath();
context.fillStyle = '#e74c3c';
context.strokeStyle="#e74c3c";
context.fill();
context.stroke();

context.beginPath();
context.moveTo(24,24);
context.arc(24, 24, 21, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255,255,255,1)';
context.strokeStyle="rgba(255,255,255,1)";
context.fill();
context.stroke();

context.beginPath();
context.arc(24, 24, 18.5, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = '#ddd';
context.stroke();

context.font = "bold 9pt Arial";
context.fillStyle = '#e74c3c';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.moveTo(24, 24);
context.fillText(text, 24, 24);
}
var t = 0;
var timer = null;
function loadCanvas(now,ratio) {
timer = setInterval(function() {
if (t > now) {
clearInterval(timer);
} else {
draw(t/0.7980000000000006,ratio);
t += 0.005;
}
}, 5);
}
</script>

</body>

</html>

0 0