欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-04 14:51:05
这篇文章主要介绍了HTML5 用动画的表现形式装载图像 的相关资料,需要的朋友可以参考下... 16-03-08...
示例使用html5的canvas标签和javascript脚本,简单的编写了装载图片效果,请使用支持html5的浏览器预览效果:
下图为以逐渐横向栅格的效果图

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

html部分:
xml/html code复制内容到剪贴板
  1. <!doctype html>    
  2. <html lang="en">    
  3. <head>    
  4. <meta charset="utf-8">    
  5. <title>html5 装载图片</title>    
  6. </head>    
  7. <body>    
  8. <button onclick="drawimg1()">从左到右</button>    
  9. <button onclick="drawimg2()">从*到左右两边</button>    
  10. <button onclick="drawimg3()">以逐渐横向栅格</button>    
  11. <hr/>    
  12. <canvas class="canvas" id="canvas" width="600" height="300"></canvas>    
  13. </body>    
  14. </html>   

javascript部分:
 
xml/html code复制内容到剪贴板
  1.  //初始化    
  2. var canvas = document.getelementbyid("canvas"),    
  3. context = canvas.getcontext("2d"),    
  4. image = new image();    
  5. image.src = "img/test.jpg";    
  6. //从左到右加载方法    
  7. function drawimg1(){    
  8. var drawwidth = 0,    
  9. interval = setinterval(function(){    
  10. context.drawimage(image, 0, 0, drawwidth, image.height, 0, 0, drawwidth, image.height);    
  11. drawwidth += 20;    
  12. if(drawwidth > canvas.width) clearinterval(interval);    
  13. },100);    
  14. }    
  15. //从*向左右两边拉开加载方法    
  16. function drawimg2(){    
  17. var drawwidth = 0,    
  18. drawleft = canvas.width/2,    
  19. interval = setinterval(function(){    
  20. context.drawimage(image, drawleft, 0, drawwidth, image.height, drawleft, 0, drawwidth, image.height);    
  21. drawwidth += 20;    
  22. drawleft -10;    
  23. if(drawleft < 0) clearinterval(interval);    
  24. },100);    
  25. }    
  26. //以逐渐横向栅格加载方法    
  27. function drawimg3(){    
  28. var drawwidth = 0,    
  29. spacewidth = canvas.width/20, //10指分割的块数    
  30. interval = setinterval(function(){    
  31. for(var i = 0;i<20;i++){    
  32. context.drawimage(image, i*spacewidth, 0, drawwidth, image.height, i*spacewidth, 0, drawwidth, image.height);    
  33. }    
  34. drawwidth += 5;    
  35. if(drawwidth > spacewidth) clearinterval(interval);    
  36. },100);    
  37. }  

以上内容是小编给大家介绍的html5 用动画的表现形式装载图像,希望对大家有所帮助!