【实例】使用canvas缓缓加载一个图片到web页面中

最新推荐文章于 2024-08-13 15:21:44 发布

_Slience_

最新推荐文章于 2024-08-13 15:21:44 发布

阅读量1.7w

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/u010513756/article/details/47284921

版权

Web前端专栏收录该内容

94 篇文章 1 订阅

订阅专栏

由于要做web前端设计，用到这个效果，弄了一个晚上，总算是弄出来了

效果

从上到下缓缓载入一个图片

思路

获取一个空白canvas，使用drawImage方法画出整个图像
获取这个图像中的每一行的数据
清除这个canvas，之后在缓缓把刚刚获取到的数据写回去
（如果可以直接获取image对象的数据直接写到canvas就好了）

实现

在线演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/basic.css"/>
	</head>
	<body>
		<img src="img/people.png" style="display: none;" id="test"/>
		<div id="mainPanel">
			<canvas id="marker_box" width="1200px" height="700px"></canvas>
		</div>
	</body>
<script type="text/javascript">
		//用于计算当前写入行
var count = 0;
//用于存储所有数据的全局变量，我本想传这个参过去，但是不懂怎么回事，总是不成功，干脆弄成全局变量好了
var frameAll = null;	

window.onload = function () {
	var marker_box = document.getElementById("marker_box");
	var context = marker_box.getContext("2d");
	//创建一个image对象
	var myImage = new Image();
	myImage.src = "img/people.png";
	//把那个image对象画在context上，我在这里就不写那些参数是什么了，百度一下就有
	context.drawImage(myImage, 0, 0);
	getImageData();
	//清除context上的数据
	context.clearRect(0, 0, marker_box.width, marker_box.height);
	showImage()
};
function getImageData () {
	var marker_box = document.getElementById("marker_box");
	var context = marker_box.getContext("2d");
	frameAll = new Array();
	
	//这个for是逐行的获取图像数据，之后依次放入frameAll中
	for(var i = 0; i < marker_box.height; i++) {
		var myFrame = context.getImageData(0, i, marker_box.width, 1);
		frameAll.push(myFrame);
	}
}

function showImage() {
	var marker_box = document.getElementById("marker_box");
	var context = marker_box.getContext("2d");
	//写入当前行的图像数据
	context.putImageData(frameAll[count], 0, count, 0, 0, marker_box.width, 1);
	//准备写下一行了
	count++;
	if(count >= marker_box.height) {
		//当写入完成的时候结束showImage方法
		return;
	} else {
		//还需要继续写入图像数据，使用setTimeout实现以最快速度显示数据
		//在这里可以使用worker对线程性能进行优化，不过本文不是写这个的，况且我现在好饿了，就不弄了
		setTimeout("showImage()", 0);
	}
}

</script>
</html>