画圆环,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');
// 画灰色的圆
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI*2);
// ctx.closePath();
ctx.strokeStyle = 'green';
ctx.stroke();
// 画红色的圆
ctx.beginPath();
ctx.arc(100, 100, 70, 0, Math.PI*2);
// ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
function animate(){
requestAnimationFrame(function (){
process = process + 1;
drawCricle(ctx, process);
if (process < 90) {
animate();
}
});
}
function drawCricle(ctx, percent){
// 画进度环
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();
// 画内填充圆
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = '#fff';
ctx.fill();
// 填充文字
ctx.font = "bold 20pt Microsoft YaHei";
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.moveTo(100, 100);
ctx.fillText(process + '%', 100, 100);
}
animate();
}());
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas progress</title>
</head>
<body>
<canvas id="process" width="300" height="300"></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 < 75) {
animate();
}
});
}
function drawCricle(ctx, percent){
// 画进度环
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
ctx.closePath();
ctx.fillStyle = '#108EE9';
ctx.fill();
// 画第一层灰色的圆
ctx.beginPath();
ctx.arc(100, 100, 70, 0, Math.PI*2);
// ctx.closePath();
ctx.fillStyle = '#ededed';
ctx.fill();
// 画第二层白色的圆
ctx.beginPath();
ctx.arc(100, 100, 65, 0, Math.PI*2);
// ctx.closePath();
ctx.fillStyle = '#fcfcfc';
ctx.fill();
// 画内填充圆
ctx.beginPath();
ctx.arc(100, 100, 55, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = '#FAFCFC';
ctx.fill();
// 画灰色的框
ctx.beginPath();
ctx.arc(100, 100, 55, 0, Math.PI*2);
// ctx.closePath();
ctx.strokeStyle = '#f2f2f2';
ctx.stroke();
// 填充文字
ctx.font = "bold 20pt Microsoft YaHei";
ctx.fillStyle = '#DA4816';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.moveTo(100, 100);
ctx.fillText(process + '%', 100, 80);
ctx.fillStyle = '#aaa';
ctx.font="10px Georgia";
ctx.fillText("销售目标完成度",100,100);
// ctx.font="10px Georgia";
ctx.fillText("集团内排名",100,120);
ctx.fillStyle = '#DA4816';
ctx.font="10px Georgia";
ctx.fillText("1",100,140);
}
animate();
}());
</script>
</body>
</html>
