Home>Web design tutorial>HTML tutorial

An example using HTML5 Canvas imitation loading

Author：Eve Cole Update Time：2025-03-28 11:48:02

This example is an html5 Canvas simulation web loading loading instance. The renderings are as follows:

The example code: (Preview address: 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#ffff;
  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>
Related Articles