canvas绘制圆环进度条

本文展示了如何使用HTML5的canvas元素绘制圆环形进度条。通过JavaScript函数drawRing,创建了两个同心圆环,外环固定灰色,内环颜色根据给定的百分比变化。此外,还在圆环中心添加了百分比文字展示。

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

圆环进度表示是现在常用的一种进度标识方法,在此特意记录一下以便后续修改使用,此例仅供参考!
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制圆环进度条</title>
	</head>
	<body>
		<div>
			<canvas id="myCanvas"></canvas>
		</div>
		<script type="text/javascript">
			function drawRing(w,h,val){
				//先创建一个canvas画布对象,设置宽高
				var c=document.getElementById('myCanvas');
				var ctx=c.getContext('2d');
				ctx.canvas.width=w;
				ctx.canvas.height=h;
				//圆环有两部分组成,底部灰色完整的环,根据百分比变化的环
				//先绘制底部完整的环
				//起始一条路径
				ctx.beginPath();
				//设置当前线条的宽度
				ctx.lineWidth=10;//10px
				//设置笔触的颜色
				ctx.strokeStyle='#CCCCCC';
				//arc()方法创建弧/曲线(用于创建圆或部分圆)arc(圆心x,圆心y,半径,开始角度,结束角度)
				ctx.arc(50,50,40,0,2*Math.PI);			
				//绘制已定义的路径
				ctx.stroke();
				
				//绘制根据百分比变动的环
				ctx.beginPath();
				ctx.lineWidth=10;
				ctx.strokeStyle='#d54540';
				//设置开始处为0点钟方向(-90*Math.PI/180)
				//x为百分比值(0-100)
				ctx.arc(50,50,40,-90*Math.PI/180,(val*3.6-90)*Math.PI/180);
				ctx.stroke();
				//绘制中间的文字
				ctx.font='20px Arial';
				ctx.fillStyle='#747474';
				ctx.textBaseline='middle';
				ctx.textAlign='center';
				ctx.fillText(val+'%',50,50);
			}
			drawRing(100,100,30);
		</script>
	</body>
</html>
运行结果如下:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值