js canvas 实现简单的加载条

最新推荐文章于 2023-05-04 20:04:34 发布

爱在彩虹

最新推荐文章于 2023-05-04 20:04:34 发布

阅读量929

点赞数

分类专栏： javascript 文章标签： javascript canvas

本文链接：https://blog.csdn.net/u011113654/article/details/75720673

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>canvas实现加载条动画</title>
	</head>
	<body>
		<canvas id="loadingProgressCanvas"></canvas>
		
		<script>
			/*
    		 * 获取canvas, canvas本身没有画图能力，相当于一个画布，提供绘制图形的地方
			 * document.getElementsByTagName("canvas")[0]
			 * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas")
			 * document.querySelectorAll("canvas")[0]
			 */
			var loadingProgressCanvas = document.getElementById("loadingProgressCanvas");
			var ctx = loadingProgressCanvas.getContext("2d"); // 获取绘制图形的对象(画笔)
			drawFirst(); // 绘制初始状态
			
			var progress = 0; // 定义进度
			drawProgress(); // 绘制初始进度
			// 定义定时器, 100ms钟绘制5%
			var timer = setInterval("drawProgress()", 100);
			
			// 绘制初始状态
			function drawFirst() {
				ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条
				/*
				 * 定义矩形(左上角x/y左边,宽高)
				 */
				ctx.rect(0, 0, 200, 30);
				ctx.stroke(); // 绘制定义好的矩形路径
				ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条
			}
			
			// 绘制进度条
			function drawProgress() {
				if(progress == 200) {
					progress = 0;
					ctx.clearRect(0, 0, 200, 30); // 清楚之前的绘制
				} else {
					ctx.moveTo(progress, 0); // 移动到上一次绘制的终点,准备绘制下一次的进度
					ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05
					progress += 10; 
				}
			}
		</script>
	</body>
</html>