canvas环形进度条
学习canvas的时候随手写了一个环形进度条 简单实用。
效果图：
附代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas progress</title>
</head>
<body>
<canvas id="process" width="200" height="200"></canvas>
<script>
(function (){
var c = document.getElementById('process'),
process = 0,
ctx = c.getContext('2d');
function animate(){
requestAnimationFrame(function (){
process = process + 1;
drawCricle(ctx, process);
if (process < 100) {
animate();
}
});
}
function drawCricle(ctx, percent){
ctx.clearRect(0,0,200,200);
ctx.beginPath();
ctx.lineWidth=10;
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.strokeStyle = '#F6F6F6';
ctx.stroke();
// 画进度环
ctx.beginPath();
ctx.lineWidth=10;
ctx.arc(100, 100, 80, Math.PI/2*3, Math.PI/2*3+Math.PI * (2 * percent / 100 ));
ctx.strokeStyle = '#FF9600';
ctx.stroke();
// 填充文字
ctx.font = "bold 20pt Microsoft YaHei";
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(process + '%', 100, 100);
}
animate();
}());
</script>
</body>
</html>
