首页>网页设计教程>HTML教程

一个使用HTML5 Canvas 仿 loading 的实例

作者：Eve Cole 更新时间：2025-03-28 11:48:02

这个例子是html5 Canvas模拟网页loading加载实例。效果图如下：

该实例代码：（预览地址：http://html5demos.com/canvas）

  1. <!DOCTYPEhtml>
  2. <htmllang=enxmlns=http://www.w3.org/1999/xhtml>
  3. <head>
  4. <metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/>
  5. <title>HTML5Demo:canvas</title>
  6. <style>
  7. body{ 
  8. font:normal16px/20pxHelvetica,sans-serif; 
  9. background:rgb(237,237,236); 
  10. margin:0; 
  11. margin-top:40px; 
  12. padding:0; 
  13. } 
  15. article,section,header,footer{ 
  16. display:block; 
  17. } 
  19. #wrapper{ 
  20. width:600px; 
  21. margin:0auto; 
  22. background:#fffurl(images/shade.jpg)repeat-xcenterbottom; 
  23. -moz-border-radius:10px; 
  24. -webkit-border-radius:10px; 
  25. border-top:1pxsolid#fff; 
  26. padding-bottom:76px; 
  27. } 
  29. h1{ 
  30. padding-top:10px; 
  31. } 
  33. h2{ 
  34. font-size:100%; 
  35. font-style:italic; 
  36. } 
  38. header, 
  39. article>*, 
  40. footera, 
  41. footerp{ 
  42. margin:20px; 
  43. } 
  45. footer>*{ 
  46. margin:20px; 
  47. color:#999; 
  48. } 
  50. article{ 
  51. position:relative; 
  52. } 
  53. </style>
  54. <script>
  55. //Fordiscussionandcomments,see:http://remysharp.com/2009/01/07/html5-enabling-script/ 
  56. (function(){if(!/*@cc_on!@*/0)return;vare=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. <sectionid=wrapper>
  61. <header>
  62. <h1>Canvas</h1>
  64. </header>
  65. <article></article>
  66. <footer><ahref=/>HTML5demo</a></footer>
  67. </section>
  68. <scriptsrc=h5utils.js></script>
  69. <script>
  71. buildSpinner({x:50,y:50,size:20,degrees:30}); 
  73. functionbuildSpinner(data){ 
  75. varcanvas=document.createElement('canvas'); 
  76. canvas.height=100; 
  77. canvas.width=300; 
  78. document.getElementsByTagName('article')[0].appendChild(canvas); 
  79. varctx=canvas.getContext(2d), 
  80. i=0,degrees=data.degrees,loops=0,degreesList=[]; 
  82. for(i=0;i<degrees;i++){ 
  83. degreesList.push(i); 
  84. } 
  86. //reset 
  87. i=0; 
  89. //soIcankillitlater 
  90. window.canvasTimer=setInterval(draw,1000/degrees); 
  92. functionreset(){ 
  93. ctx.clearRect(0,0,100,100);//clearcanvas 
  95. varleft=degreesList.slice(0,1); 
  96. varright=degreesList.slice(1,degreesList.length); 
  97. degreesList=right.concat(left); 
  98. } 
  100. functiondraw(){ 
  101. varc,s,e; 
  103. vard=0; 
  105. if(i==0){ 
  106. reset(); 
  107. } 
  109. ctx.save(); 
  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; 
  119. ctx.arc(data.x,data.y,data.size,(Math.PI/180)*s,(Math.PI/180)*e,false); 
  120. ctx.stroke(); 
  122. ctx.restore(); 
  124. i++; 
  125. if(i>=degrees){ 
  126. i=0; 
  127. } 
  128. } 
  129. } 
  132. </script>
  133. <script>
  134. vargaJsHost=((https:==document.location.protocol)?https://ssl.:http://www.); 
  135. document.write(unescape(%3Cscriptsrc='+gaJsHost+google-analytics.com/ga.js'type='text/javascript'%3E%3C/script%3E)); 
  136. </script>
  137. <script>
  138. try{ 
  139. varpageTracker=_gat._getTracker(UA-1656750-18); 
  140. pageTracker._trackPageview(); 
  141. }catch(err){}</script>
  142. </body>
  144. </html>
相关文章