使用canvas绘制环形进度条

最新推荐文章于 2023-03-07 20:15:42 发布

原创最新推荐文章于 2023-03-07 20:15:42 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas绘图

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas实现动态环形进度条的方法。通过JavaScript控制，进度条可以随时间变化颜色并显示当前进度百分比，适用于网页动态效果展示。

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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>绘制环形进度条</title>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext(“2d”);
//设置进度条变化的角度
var deg = 0,
//设置起点角度
start = -Math.PI / 2;
var timer = setInterval(function(){
//清除画布
ctx.clearRect(0,0,800,500);
//绘制底圆
ctx.strokeStyle = "#aaa";
ctx.lineWidth = 15;
ctx.beginPath();
ctx.arc(400, 250, 200, 0, Math.PI * 2);
ctx.stroke();
//绘制进度
ctx.beginPath();
deg += 6;
if(deg <= 90){
ctx.strokeStyle = "#f00";
}else if(deg <= 180){
ctx.strokeStyle = "#ff0";
}else{
ctx.strokeStyle = "#0f0";
}
ctx.arc(400,250,200,start,start + deg * Math.PI / 180);
ctx.stroke();
ctx.font = "60px Simhei";
ctx.fillStyle = "#0f0";
//绘制文本进度
var txt = parseInt(deg / 360 * 100) + "%";
ctx.textBaseline = "top";
ctx.fillText(txt,350,220);
if(deg >= 360){
clearInterval(timer);
}
},1000)
</script>
</body>
</html>