您的位置：首页 > 其它

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

2015-08-04 23:34 585 查看

由于要做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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航