Page d'accueil>Tutoriel de conception de sites Web>Tutoriel HTML

Un exemple utilisant le chargement d'imitation du canevas HTML5

Auteur：Eve Cole Date de mise à jour：2025-03-28 11:48:02

Cet exemple est une instance de chargement de chargement Web de simulation de simulation HTML5. Les rendus sont les suivants:

L'exemple de code: (Adresse d'aperçu: http://html5demos.com/canvas)

  1.  <! Doctypehtml>
  2.  <htmllang = enxmlns = http: //www.w3.org/1999/xhtml>
  3.  <adal>
  4.  <Metahttp-Equiv = Content-TypeContent = Text / Html; charSet = UTF-8 />
  5.  <Title> Html5Demo: Canvas </Title>
  6.  <style>
  7.  corps{
  8.  Police: normal16px / 20pxhelvetica, SANS-Serif;
  9.  Contexte: RVB (237 237 236);
  10.  marge: 0;
  11.  marge: 40px;
  12.  rembourrage: 0;
  13.  }
  15.  Article, section, en-tête, pied de page {
  16.  Affichage: bloc;
  17.  }
  19.  #Wrapper {
  20.  Largeur: 600px;
  21.  marge: 0Auto;
  22.  Contexte: #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.  Tableau de rembourrage: 10px;
  31.  }
  33.  H2 {
  34.  taille de police: 100%;
  35.  Style de police: italique;
  36.  }
  38.  en-tête,
  39.  Article> *,
  40.  Foera,
  41.  foottorp {
  42.  marge: 20px;
  43.  }
  45.  pied de page> * {
  46.  marge: 20px;
  47.  Couleur: # 999;
  48.  }
  50.  article{
  51.  Position: relative;
  52.  }
  53.  </ style>
  54.  <cript>
  55.  //Fordiscussionandcomments ,see:http://remysharp.com/2009/01/07/html5-abling-script/
  56.  (function () {if (! / * @ cc_on! @ * / 0) return; Vare = abbr, article, à part, audio, bb, canevas, datagrid, datalist, détails, dialogue, eventsource, figure, foo ter, en-tête, marc, menu, compteur, navigation, sortie, progression, section, temps, vidéo.split (','), i = e.Length; while (i -) {document.CreateElement (e [i])}}) ()
  57.  </cript>
  58.  </ head>
  59.  <body>
  60.  <ectionid = wrapper>
  61.  <dique>
  62.  <h1> canvas </h1>
  64.  </-header>
  65.  <article> </bone>
  66.  <foomer> <href = /> html5demo </a> </footer>
  67.  </ section>
  68.  <scriptsrc = h5utils.js> </ script>
  69.  <cript>
  71.  buildspinner ({x: 50, y: 50, taille: 20, degrés: 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, degrés = data.degrees, boucles = 0, degreesList = [];
  82.  pour (i = 0; i <degrés; i ++) {
  83.  degreesList.push (i);
  84.  }
  86.  //réinitialiser
  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 = droite.concat (gauche);
  98.  }
  100.  functiondraw () {
  101.  varc, s, e;
  103.  vard = 0;
  105.  if (i == 0) {
  106.  réinitialiser();
  107.  }
  109.  ctx.save ();
  111.  d = degreeslist [i];
  112.  c = math.floor (255 / degrés * i);
  113.  ctx.strokestyle = 'rgb (' + c + ',' + c + ',' + c + ')';
  114.  ctx.linewidth = data.size;
  115.  ctx.beginPath ();
  116.  s = math.floor (360 / degrés * (d));
  117.  e = math.floor (360 / degrés * (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> = degrés) {
  126.  i = 0;
  127.  }
  128.  }
  129.  }
  132.  </cript>
  133.  <cript>
  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.  </cript>
  137.  <cript>
  138.  essayer{
  139.  VarPageTracker = _gat._GetTracker (UA-1656750-18);
  140.  PageTracker._TrackPageView ();
  141.  } catch (err) {} </ script>
  142.  </docy>
  144.  </html>
Articles connexes