下图为以逐渐横向栅格的效果图
html部分： xml/html code复制内容到剪贴板
nbsp;html> html lang=en> head> meta charset=utf-8> title>html5 装载图片title> head> body> button onclick=drawimg1()>从左到右button> button onclick=drawimg2()>从中央到左右两边button> button onclick=drawimg3()>以逐渐横向栅格button> hr/> canvas class=canvas id=canvas width=600 height=300>canvas> body> html>
javascript部分：
xml/html code复制内容到剪贴板
//初始化 var canvas = document.getelementbyid(canvas), context = canvas.getcontext(2d), image = new image(); image.src = img/test.jpg; //从左到右加载方法 function drawimg1(){ var drawwidth = 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); } //从中央向左右两边拉开加载方法 function drawimg2(){ var drawwidth = 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); } //以逐渐横向栅格加载方法 function drawimg3(){ var drawwidth = 0, spacewidth = canvas.width/20, //10指分割的块数 interval = setinterval(function(){ for(var i = 0;i20;i++){ context.drawimage(image, i*spacewidth, 0, drawwidth, image.height, i*spacewidth, 0, drawwidth, image.height); } drawwidth += 5; if(drawwidth > spacewidth) clearinterval(interval); },100); }
以上内容是小编给大家介绍的html5 用动画的表现形式装载图像，希望对大家有所帮助！