• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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 用动画的表现形式装载图像，希望对大家有所帮助！

    上一篇：HTML5 canvas实现雪花飘落特效
    下一篇：HTML5离线缓存Manifest是什么
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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