画圆环,Canvas百分比环状图

最新推荐文章于 2023-04-21 11:49:44 发布

原创最新推荐文章于 2023-04-21 11:49:44 发布 · 361 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #tiff #firefox #gwt #openssh

本文介绍如何使用HTML5 Canvas API创建动态进度条。通过逐步绘制不同颜色的圆形和文本，实现了一个从0%到指定百分比的动画效果。此外，还展示了如何在进度条中加入额外的文字说明和其他视觉元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>Canvas progress</title>

</head>

<body>

(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>

<head>

<title>Canvas progress</title>

</head>

<body>

(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>