DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5 Canvas模擬loading實例
HTML5 Canvas模擬loading實例
編輯：HTML5詳解     

這個例子是Html5 Canvas模擬網頁loading加載實例。效果圖如下：
 

HTML 5 canvas效果圖
HTML 5 canvas效果圖

該實例代碼：（預覽地址：http://Html5demos.com/canvas）
 
  1. <!DOCTYPE Html> 
  2. <Html lang="en" XMLns="http://www.w3.org/1999/xHtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/Html;charset=utf-8" /> 
  5. <title>Html5 Demo: canvas</title> 
  6. <style> 
  7. body {   
  8.   font: normal 16px/20px Helvetica, sans-serif;  
  9.   background: rgb(237, 237, 236);  
  10.   margin: 0;  
  11.   margin-top: 40px;  
  12.   padding: 0;  
  13. }  
  14.  
  15. article, section, header, footer {  
  16.   display: block;  
  17. }  
  18.  
  19. #wrapper {  
  20.   width: 600px;  
  21.   margin: 0 auto;  
  22.   background: #fff url(images/shade.jpg) repeat-x center bottom;  
  23.   -moz-border-radius: 10px;  
  24.   -webkit-border-radius: 10px;  
  25.   border-top: 1px solid #fff;  
  26.   padding-bottom: 76px;  
  27. }  
  28.  
  29. h1 {  
  30.   padding-top: 10px;  
  31. }  
  32.  
  33. h2 {  
  34.   font-size: 100%;  
  35.   font-style: italic;  
  36. }  
  37.  
  38. header,  
  39. article > *,  
  40. footer a,  
  41. footer p {  
  42.   margin: 20px;  
  43. }  
  44.  
  45. footer > * {  
  46.   margin: 20px;  
  47.   color: #999;  
  48. }  
  49.  
  50. article {  
  51.   position: relative;  
  52. }  
  53. </style> 
  54. <script> 
  55. // For discussion and comments, see: http://remysharp.com/2009/01/07/Html5-enabling-script/  
  56. (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()  
  57. </script> 
  58. </head> 
  59. <body> 
  60. <section id="wrapper"> 
  61.     <header> 
  62.       <h1>Canvas</h1> 
  63.  
  64.     </header> 
  65.     <article></article> 
  66.     <footer><a href="/">Html5 demo</a></footer> 
  67. </section> 
  68. <script src="h5utils.JS"></script> 
  69. <script> 
  70.  
  71. buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });  
  72.  
  73. function buildSpinner(data) {  
  74.     
  75.   var canvas = document.createElement('canvas');  
  76.   canvas.height = 100;  
  77.   canvas.width = 300;  
  78.   document.getElementsByTagName('article')[0].appendChild(canvas);  
  79.   var ctx = canvas.getContext("2d"),  
  80.     i = 0, degrees = data.degrees, loops = 0, degreesList = [];  
  81.       
  82.   for (i = 0; i < degrees; i++) {  
  83.     degreesList.push(i);  
  84.   }  
  85.     
  86.   // reset  
  87.   i = 0;  
  88.     
  89.   // so I can kill it later  
  90.   window.canvasTimer = setInterval(draw, 1000/degrees);    
  91.  
  92.   function reset() {  
  93.     ctx.clearRect(0,0,100,100); // clear canvas  
  94.       
  95.     var left = degreesList.slice(0, 1);  
  96.     var right = degreesList.slice(1, degreesList.length);  
  97.     degreesList = right.concat(left);  
  98.   }  
  99.     
  100.   function draw() {  
  101.     var c, s, e;  
  102.  
  103.     var d = 0;  
  104.  
  105.     if (i == 0) {  
  106.       reset();  
  107.     }  
  108.  
  109.     ctx.save();  
  110.  
  111.     d = degreesList[i];  
  112.     c = Math.floor(255/degrees*i);  
  113.     ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';  
  114.     ctx.lineWidth = data.size;  
  115.     ctx.beginPath();  
  116.     s = Math.floor(360/degrees*(d));  
  117.     e = Math.floor(360/degrees*(d+1)) - 1;  
  118.  
  119.     ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);  
  120.     ctx.stroke();  
  121.  
  122.     ctx.restore();  
  123.  
  124.     i++;  
  125.     if (i >= degrees) {  
  126.       i = 0;  
  127.     }  
  128.   }    
  129. }  
  130.  
  131.  
  132. </script> 
  133. <script> 
  134. var gaJSHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  
  135. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.JS' type='text/Javascript'%3E%3C/script%3E"));  
  136. </script> 
  137. <script> 
  138. try {  
  139. var pageTracker = _gat._getTracker("UA-1656750-18");  
  140. pageTracker._trackPagevIEw();  
  141. } catch(err) {}</script> 
  142. </body> 
  143.  
  144. </Html> 
HTML5詳解
簡單介紹HTML5中audio標簽的使用
這篇文章主要介紹了Html5中audio標簽的使用,在各浏覽器中添加音頻播放控件,需要的朋友可以參
博客從typecho換成liquidluck
用了2年多typecho了，再次將博客更換為liquidluck，同時也將博客內容從vps上遷移到
HTML5安全介紹之內容安全策略（CSP）簡介
萬維網的安全策略植根於同源策略。例如www.mb5u.com的代碼只能訪問www.mb5u.com

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
html5跨域通訊之postMessage的用法總結 多種驚人的CSS3動畫演示 在IE6系列等老式浏覽器中使用HTML5的新標簽實現方案 HTML5浏覽器兼容性測試 html5 音樂播放器 audio 標簽使用概述 HTML 5 預覽(4) html5的canvas實現3d雪花飄舞效果 HTML5+CSS3繪制鋸齒狀的矩形 HTML5的結構和語義――目錄 HTML5拖拽文件到浏覽器並實現文件上傳下載功能代碼
熱門推薦
html5構建觸屏網站之網站尺寸探討 什麼是html5 HTML5 Canvas draw方法制作動畫效果示例 HTML5技術教程 如何支持搖一搖 HTML5視頻框架 Popcorn.js HTML5驗證以及日期顯示的實現詳解 html5制作能在微信轉發的動畫賀卡 API預覽JavaScript與HTML5腳本 HTML5之WebGL 3D概述(下)―借助類庫開發及框架介紹
大家都在看
iframe如何動態創建及釋放其所占內存 jQuery可見性過濾器：hidden和：visibility用法實例 自編jQuery插件實現模擬alert和confirm jQ的eq方法 JS去除重復並統計數量的實現方法 DIV+CSS網頁布局概念及其優勢 繪制業務流程圖：流程圖繪制工具 設計理論:煙斗的故事
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved