Startseite>Webdesign-Tutorial>HTML-Tutorial

Ein Beispiel unter Verwendung von HTML5 -Leinwand -Imitationsbelastung

Autor：Eve Cole Aktualisierungszeit：2025-03-28 11:48:02

Dieses Beispiel ist eine HTML5 -Canvas -Simulation -Web -Lade -Ladeinstanz. Die Renderings sind wie folgt:

Der Beispielcode: (Vorschau -Adresse: http://html5demos.com/canvas)

  1.  <! DocTypehtml>
  2.  <htmllang = enxMlns = http: //www.w3.org/1999/xhtml>
  3.  <kopf>
  4.  <metahttp-äquiv = content-typecontent = text/html; charset = utf-8/>
  5.  <title> html5demo: canvas </title>
  6.  <Styles>
  7.  Körper{
  8.  Schriftart: normal16px/20pxhelvetica, sans-serif;
  9.  Hintergrund: RGB (237.237.236);
  10.  Rand: 0;
  11.  Rand: 40px;
  12.  Polsterung: 0;
  13.  }
  15.  Artikel, Abschnitt, Header, Fußzeile {
  16.  Anzeige: Block;
  17.  }
  19.  #Verpackung{
  20.  Breite: 600px;
  21.  Rand: 0Auto;
  22.  Hintergrund: #fffurl (Bilder/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.  Schriftgröße: 100%;
  35.  Schriftstil: kursiv;
  36.  }
  38.  Kopfball,
  39.  Artikel>*,
  40.  Footera,
  41.  Fußzeilen {
  42.  Rand: 20px;
  43.  }
  45.  Fußball>*{
  46.  Rand: 20px;
  47.  Farbe:#999;
  48.  }
  50.  Artikel{
  51.  Position: Relativ;
  52.  }
  53.  </style>
  54.  <Script>
  55.  //FordiscussionAndComents,see
  56.  (function () {if (!/*@cc_on!@*/0) return; vare = abbr, article, beiseite, audio, bb, canvas, datagrid, datalist, details, dialog, eventsource, fooo Ter, Header, Mark, Menü, Messgerät, Navigation, Ausgabe, Fortschritt, Abschnitt, Zeit, Video.Split (','), i = E.Length; while (i-) {document.createelement (e [i])}}) ())
  57.  </script>
  58.  </head>
  59.  <body>
  60.  <AbschnittID = Wrapper>
  61.  <Header>
  62.  <h1> canvas </h1>
  64.  </header>
  65.  <Aktion> </article>
  66.  <footer> <ahref =/> html5demo </a> </footer>
  67.  </Abschnitt>
  68.  <scriptSrc = h5utils.js> </script>
  69.  <Script>
  71.  BuildSpinnner ({x: 50, y: 50, Größe: 20, Grad: 30});
  73.  FunctionBuildspinnner (Daten) {
  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, Grad = Daten.Degrees, Loops = 0, Gradlist = [];
  82.  für (i = 0; i <Grad; i ++) {
  83.  degreeslist.push (i);
  84.  }
  86.  //zurücksetzen
  87.  i = 0;
  89.  // Soicankillitlater
  90.  Fenster.Canvastimer = setInterval (zeichnen, 1000/Grad);
  92.  FunktionReset () {
  93.  CTX.ClearRect (0,0,100.100); // Clearcanvas
  95.  varleft = degreeslist.lice (0,1);
  96.  varright = degreeslist.slice (1, degreeslist.length);
  97.  degreeslist = rechts.concat (links);
  98.  }
  100.  functionDraw () {
  101.  varc, s, e;
  103.  vard = 0;
  105.  if (i == 0) {
  106.  zurücksetzen();
  107.  }
  109.  ctx.save ();
  111.  d = Gradlist [i];
  112.  C = Math.Floor (255/Grad*i);
  113.  ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
  114.  ctx.linewidth = data.Size;
  115.  ctx.beginPath ();
  116.  S = Math.Floor (360/Grad*(d));
  117.  e = math.floor (360/Grad*(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> = Grad) {
  126.  i = 0;
  127.  }
  128.  }
  129.  }
  132.  </script>
  133.  <Script>
  134.  vargajshost = ((https: == document.location.protocol)? https: // ssl .: http: // www.);
  135.  document.write (unsCape (%3cScriptsrc = '+gajshost+google-Analytics.com/ga.js'type =' text/javaScript '%3e%3c/script%3E));
  136.  </script>
  137.  <Script>
  138.  versuchen{
  139.  VARPAGETRACKER = _gat._GetTracker (UA-1656750-18);
  140.  pagetracker._trackpageView ();
  141.  } catch (err) {} </script>
  142.  </body>
  144.  </html>
Ähnliche Artikel