HTML5 用动画的表现形式装载图像 _html5教程技巧

示例使用HTML5的canvas标签和Javascript脚本，简单的编写了装载图片效果，请使用支持HTML5的浏览器预览效果：
下图为以逐渐横向栅格的效果图

html部分：

XML/HTML Code复制内容到剪贴板

1. nbsp;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;i20;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 用动画的表现形式装载图像，希望对大家有所帮助！