Canvas实现百分比进度条

最新推荐文章于 2024-05-30 01:51:11 发布

「已注销」

最新推荐文章于 2024-05-30 01:51:11 发布

阅读量712

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_36276469/article/details/86514733

版权

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

摘要由CSDN通过智能技术生成

<!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元/天解锁文章

「已注销」

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas实现百分比进度条

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="can" width=&
复制链接

扫一扫