跳转至内容
上海创厦网络科技
IT服务专家
上海创厦网络科技上海创厦网络科技
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程

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

您在这里:
  1. 首页
  2. HTML5
  3. HTML5…

示例使用HTML5的canvas标签和Javascript脚本,简单的编写了装载图片效果,请使用支持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 用动画的表现形式装载图像,希望对大家有所帮助!

Category: HTML5startupplaza2022年5月30日评论

作者: startupplaza

文章导航

历史的文章历史的文章:html5新增的定时器requestAnimationFrame实现进度条功能未来的文章未来的文章:使用HTML5 Canvas API中的clip()方法裁剪区域图像

Related Posts

使用HTML5捕捉音频与视频信息概述及实例
2022年5月30日
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2022年5月30日
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2022年5月30日
HTML5对手机页面长按会粘贴复制禁用的解决方法
2022年5月30日
HTML5 Web 存储详解
2022年5月30日
html5将图片转换成base64的实例代码
2022年5月30日

技术探讨

  • 使用HTML5捕捉音频与视频信息概述及实例
  • HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
  • 详解HTML5中的