下图为以逐渐横向栅格的效果图
html部分：XML/HTML Code复制内容到剪贴板
JavaScript部分：
XML/HTML Code复制内容到剪贴板
以上内容是小编给大家介绍的HTML5 用动画的表现形式装载图像，希望对大家有所帮助！
网站建设 IT知识 IT知识教程 HTML5 用动画的表现形式装载图像 HTML5 用动画的表现形式装载图像
2021-05-08 21:12:18 示例使用HTML5的canvas标签和Javascript脚本，简单的编写了装载图片效果，请使用支持HTML5的浏览器预览效果：
下图为以逐渐横向栅格的效果图
html部分：XML/HTML Code复制内容到剪贴板<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>html5装载图片</title> </head> <body> <buttononclick="drawImg1()">从左到右</button> <buttononclick="drawImg2()">从中央到左右两边</button> <buttononclick="drawImg3()">以逐渐横向栅格</button> <hr/> <canvasclass="canvas"id="canvas"width="600"height="300"></canvas> </body> </html>
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); }
下图为以逐渐横向栅格的效果图
html部分：XML/HTML Code复制内容到剪贴板
JavaScript部分：
XML/HTML Code复制内容到剪贴板
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
最新文章
热门文章
猜你喜欢
