Canvas实现百分比进度条

最新推荐文章于 2022-07-01 15:35:56 发布

「已注销」

最新推荐文章于 2022-07-01 15:35:56 发布

阅读量771

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_36276469/article/details/86514733

版权

本文介绍如何利用HTML5的Canvas元素来创建一个显示动态百分比的进度条效果。通过JavaScript控制，实时更新进度条的宽度，实现数据变化时的动态展示，适用于各种需要实时反馈进度的应用场景。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="can" width="500" height="500" ></canvas>
		
		<script>
			var can=document.getElementById("can");
			var con=can.getContext('2d');
			time();
			setInterval(time,1000);
			function time(){
				con.clearRect(0,0,500,500);//清除矩形
				//先绘制一个园
				con.beginPath();
				con.lineWidth=10;
				con.arc(250,250,200,0,Math.PI*2,false);
				con.closePath();
				con.stroke();
			
				//时钟刻度
				for(var i=0;i<12;i++){
					//保存状态
					con.save();
					con.translate(250,250);
					con.beginPath();
					con.rotate(Math.PI/6 * i);
					//得到5到60的数值
					var textTime = i==0?60:i*5;
					con.font = '16px 宋体';
					con.textAlign = "center";
					con.fillText(textTime,0,-155)
					
					
					//时钟的刻度

最低0.47元/天解锁文章