欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5 用動畫的表現(xiàn)形式裝載圖像

  發(fā)布時間：2016-03-08 16:45:53   作者：佚名   我要評論
這篇文章主要介紹了HTML5 用動畫的表現(xiàn)形式裝載圖像 的相關(guān)資料,需要的朋友可以參考下
示例使用HTML5的canvas標簽和Javascript腳本，簡單的編寫了裝載圖片效果，請使用支持HTML5的瀏覽器預(yù)覽效果：
下圖為以逐漸橫向柵格的效果圖

html部分：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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復(fù)制內(nèi)容到剪貼板
  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指分割的塊數(shù)    
  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. }  

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

相關(guān)文章

最新評論