HTML5 用动画的表现形式装载图像

发布时间：2023-01-16 04:54:33 来源：网络

.

人生坎坎坷坷，跌跌撞撞那是在所难免。但是，不论跌了多少次，你都要坚强地再次站起来。再试一次，成功一定属于你！

示例使用HTML5的canvas标签和Javascript脚本，简单的编写了装载图片效果，请使用支持HTML5的浏览器预览效果：
下图为以逐渐横向栅格的效果图

html部分：

XML/HTML Code复制内容到剪贴板

JavaScript部分：
　

XML/HTML Code复制内容到剪贴板

　//初始化
varcanvas=document.getElementById("canvas"),
context=canvas.getContext("2d"),
image=newImage();
image.src="img/test.jpg";
//从左到右加载方法
functiondrawImg1(){
vardrawWidth=0,
interval=setInterval(function(){
context.drawImage(image,0,0,drawWidth,image.height,0,0,drawWidth,image.height);
drawWidth+=20;
if(drawWidth>canvas.width)clearInterval(interval);
},100);
}
//从中央向左右两边拉开加载方法
functiondrawImg2(){
vardrawWidth=0,
drawLeft=canvas.width/2,
interval=setInterval(function(){
context.drawImage(image,drawLeft,0,drawWidth,image.height,drawLeft,0,drawWidth,image.height);
drawWidth+=20;
drawLeft-=10;
if(drawLeft<0)clearInterval(interval);
},100);
}
//以逐渐横向栅格加载方法
functiondrawImg3(){
vardrawWidth=0,
spaceWidth=canvas.width/20,//10指分割的块数
interval=setInterval(function(){
for(vari=0;i<20;i++){
context.drawImage(image,i*spaceWidth,0,drawWidth,image.height,i*spaceWidth,0,drawWidth,image.height);
}
drawWidth+=5;
if(drawWidth>spaceWidth)clearInterval(interval);
},100);
}