HTML5 以動畫的表現形式載入圖片 _html5教學技巧

範例使用HTML5的canvas標籤和Javascript腳本，簡單的編寫了裝載圖片效果，請使用支援HTML5的瀏覽器預覽效果：
下圖為以逐漸橫向柵格的效果圖

html部分：

XML/HTML Code複製內容到剪貼簿

1. html>    
2. html lang=lang=lang 🎜>
>
3.      head
>
4.      meta charset="UTF-8 "
>
5.      title>html5 裝載圖片html5 裝載圖片
title
6. >    
head
7. >    
body
8. >     button onclick=onclick=onclick= "
9. >由左至右button>button> 🎜> button onclick=
10. onclick=onclick==>從中央到左右兩邊button>button>button
11. button onclick=onclick
12. =onclick= ">以逐漸橫向柵格button>button>button hr/>     canvas class=class=
13. class=class=class=class=
14. class=class= id=

"canvas"

 
"600"
 

height="300"

> /canvas>     body>     html>    JavaScript部分： 　 XML/HTML Code複製內容到剪貼簿

1. 　//初始化    
2. var canvas = document
3. context = canvas.getContext("2d"),       
image
4.  = new Image(); image.src
 = 
5. "img/test.jpg";      //由左至右邊負荷法     function drawImg1(){    
6. var 
drawWidth
7.  = 
0
8. ,   ,   ,   ,   
interval = setInterval(function(){    (function(){    
context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height); > 
drawWidth  = 20;    
if(drawWidth 
12. >
 canvas.width) clearInterval(interval);    
14. },100);     }     //從中央向左右兩邊拉開加載方法    
15. function drawImg2(){     var drawWidth = 0
16. ,   ,   ,   
drawLeft
17.  = 
canvas
18. .width/2,   
19. interval = setInterval(function(){    (function(){    
context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);    drawWidth  = 20;    
20. drawLeft 
-
21. = 
10
22. ;   10
23. ;   
24. if(drawLeft 
 0) clearInterval(interval); },100);    
25. }     //以逐漸橫向柵格負載法     function drawImg3(){    
26. var drawWidth = 0,   
27. ,   ,   ,   
spaceWidth = canvas
28. .width/20, //10
29. interval
 = 
30. setInterval
(function(){    
31. (function(){    
for(var i = 0;i0;i0;i0;i0;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);    
32. }  

以上內容是小編給大家介紹的HTML5 用動畫的表現形式裝載圖像，希望對大家有幫助！