Inicio>Tutorial de diseño web>Tutorial HTML

Un ejemplo que usa carga de imitación de lona HTML5

Autor：Eve Cole Fecha de actualización：2025-03-28 11:48:02

Este ejemplo es una instancia de carga de carga web HTML5 Simulation Web. Las representaciones son las siguientes:

El código de ejemplo: (dirección de vista previa: http://html5demos.com/canvas)

  1.  <! Doctypehtml>
  2.  <htmllang = enxmlns = http: //www.w3.org/1999/xhtml>
  3.  <Evista>
  4.  <metahttp-oquiv = content-typeContent = text/html; charset = utf-8/>
  5.  <title> html5Demo: Canvas </title>
  6.  <estilo>
  7.  cuerpo{
  8.  fuente: normal16px/20pxhelvetica, sans-serif;
  9.  Antecedentes: RGB (237,237,236);
  10.  margen: 0;
  11.  margen-top: 40px;
  12.  relleno: 0;
  13.  }
  15.  artículo, sección, encabezado, pie de página {
  16.  Pantalla: bloque;
  17.  }
  19.  #envoltura{
  20.  Ancho: 600px;
  21.  margen: 0auto;
  22.  fondo: #fffurl (imágenes/shade.jpg) repetir-xcenterbottom;
  23.  -Moz-Border-Radius: 10px;
  24.  -WebKit-Border-Radius: 10px;
  25.  border-top: 1pxsolid#ffff;
  26.  Bottom: 76px;
  27.  }
  29.  H1 {
  30.  Top-top: 10px;
  31.  }
  33.  H2 {
  34.  tamaño de fuente: 100%;
  35.  estilo de fuente: cursiva;
  36.  }
  38.  encabezamiento,
  39.  artículo>*,
  40.  Pootera,
  41.  pie de página {
  42.  margen: 20px;
  43.  }
  45.  pie de página>*{
  46.  margen: 20px;
  47.  Color:#999;
  48.  }
  50.  artículo{
  51.  Posición: relativo;
  52.  }
  53.  </style>
  54.  <script>
  55.  //FordiscussionAndcomments,eee:http://remysharp.com/2009/01/07/html5-enabling-script/
  56.  (function () {if (!/*@cc_on!@*/0) return; vare = abbr, artículo, aparte, audio, bb, lienzo, datagrid, dataList, detalles, diálogo, eventsurce, figura, foo ter, encabezado, marca, menú, medidor, NAV, salida, progreso, sección, tiempo, video.split (','), i = e.length; while (i-) {document.createElement (e [i])}}) () ()
  57.  </script>
  58.  </ablo>
  59.  <Body>
  60.  <sectionId = wrapper>
  61.  <Header>
  62.  <h1> Canvas </h1>
  64.  </Header>
  65.  <artículo> </artículo>
  66.  <Tooter> <href =/> html5demo </a> </footer>
  67.  </section>
  68.  <scriptsrc = h5utils.js> </script>
  69.  <script>
  71.  buildspinner ({x: 50, y: 50, tamaño: 20, grados: 30});
  73.  functionBuildSpinNer (data) {
  75.  varcanvas = document.createElement ('Canvas');
  76.  Canvas.Height = 100;
  77.  Canvas.Width = 300;
  78.  document.getElementsBytagName ('Artículo') [0] .AppendChild (Canvas);
  79.  varctx = canvas.getContext (2d),
  80.  i = 0, grados = data.degrees, loops = 0, DegreesList = [];
  82.  para (i = 0; i <grados; i ++) {
  83.  Degreeslist.push (i);
  84.  }
  86.  //reiniciar
  87.  i = 0;
  89.  // Soicankillitlater
  90.  Window.CanVastimer = setInterval (dibujar, 1000/grados);
  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 (izquierda);
  98.  }
  100.  functionDraw () {
  101.  VARC, S, E;
  103.  vard = 0;
  105.  if (i == 0) {
  106.  reiniciar();
  107.  }
  109.  ctx.save ();
  111.  d = Degreeslist [i];
  112.  C = Math.floor (255/grados*i);
  113.  ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
  114.  ctx.linewidth = data.size;
  115.  ctx.beginpath ();
  116.  s = Math.floor (360/grados*(d));
  117.  e = math.floor (360/grados*(d+1))-1;
  119.  ctx.arc (data.x, data.y, data.size, (math.pi/180)*s, (math.pi/180)*e, falso);
  120.  ctx.stroke ();
  122.  ctx.restore ();
  124.  i ++;
  125.  if (i> = grados) {
  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.  intentar{
  139.  varpagetracker = _gat._getTracker (UA-1656750-18);
  140.  pagetracker._trackpageView ();
  141.  } catch (err) {} </script>
  142.  </body>
  144.  </html>
Artículos relacionados