Главная страница>Учебник по веб-дизайну>Учебник по HTML

Пример с использованием нагрузки HTML5 Canvas имитации

Автор：Eve Cole Время обновления：2025-03-28 11:48:02

Этот пример представляет собой экземпляр загрузки веб -загрузки HTML5. Рендеринги следующие:

Пример кода: (Адрес предварительного просмотра: http://html5demos.com/canvas)

  1.  <! Doctypehtml>
  2.  <htmllang = enxmlns = http: //www.w3.org/1999/xhtml>
  3.  <голова>
  4.  <metahttp-equiv = content-typecontent = text/html; charset = utf-8/>
  5.  <title> html5demo: canvas </title>
  6.  <style>
  7.  тело{
  8.  Шрифт: нормальный16px/20pxhelvetica, sans-serif;
  9.  Предпосылки: RGB (237 237 236);
  10.  поля: 0;
  11.  маржинальная версия: 40px;
  12.  Заполнение: 0;
  13.  }
  15.  Статья, раздел, заголовок, нижний колонтитул {
  16.  дисплей: блок;
  17.  }
  19.  #wrapper {
  20.  Ширина: 600px;
  21.  Маржа: 0Auto;
  22.  Фон: #fffurl (image/shade.jpg) Repeat-xcenterbottom;
  23.  -Моз-грамотный радий: 10px;
  24.  -Вебкит-грамотный радий: 10px;
  25.  Пограничная топ: 1pxsolid#ffff;
  26.  надоеволос: 76px;
  27.  }
  29.  H1 {
  30.  надоеволок: 10px;
  31.  }
  33.  H2 {
  34.  размер шрифта: 100%;
  35.  в стиле шрифта: курсив;
  36.  }
  38.  заголовок,
  39.  Статья>*,
  40.  манера,
  41.  нижняя часть {
  42.  Маржа: 20px;
  43.  }
  45.  нижний колонтитул>*{
  46.  Маржа: 20px;
  47.  Цвет:#999;
  48.  }
  50.  статья{
  51.  позиция: относительно;
  52.  }
  53.  </style>
  54.  <Скрипт>
  55.  //Fordiscussionandcomments, см .:http://remysharp.com/2009/01/07/html5-enabling-script/
  56.  (function () {if (!/*@cc_on!@*/0) return; vare = abbr, article, в сторону, аудио, BB, Canvas, DataGrid, Datalist, детали, диалог, Eventsource, Figure, Foo Тер, заголовок, марка, меню, счетчик, навигация, вывод, прогресс, раздел, время, видео.
  57.  </script>
  58.  </head>
  59.  <тело>
  60.  <sectionid = warper>
  61.  <заголовок>
  62.  <h1> canvas </h1>
  64.  </header>
  65.  <статья> </article>
  66.  <gooler> <ahref =/> html5demo </a> </cooler>
  67.  </section>
  68.  <scriptsrc = h5utils.js> </script>
  69.  <Скрипт>
  71.  BuildSpinner ({x: 50, y: 50, размер: 20, градусы: 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.  для (i = 0; i <градусов; i ++) {
  83.  degreeslist.push (i);
  84.  }
  86.  //перезагрузить
  87.  i = 0;
  89.  // soicankillitlater
  90.  window.canvastimer = setInterval (рисунок, 1000/градусов);
  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 (слева);
  98.  }
  100.  functionDraw () {
  101.  varc, s, e;
  103.  vard = 0;
  105.  if (i == 0) {
  106.  перезагрузить();
  107.  }
  109.  ctx.save ();
  111.  d = degreeslist [i];
  112.  c = math.floor (255/градусов*i);
  113.  ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
  114.  ctx.linewidth = data.size;
  115.  ctx.beginpath ();
  116.  s = math.floor (360/градусов*(d));
  117.  e = math.floor (360/градусов*(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> = градусы) {
  126.  i = 0;
  127.  }
  128.  }
  129.  }
  132.  </script>
  133.  <Скрипт>
  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.  <Скрипт>
  138.  пытаться{
  139.  varPageTracker = _gat._getTracker (UA-1656750-18);
  140.  pagetracker._trackpageview ();
  141.  } catch (err) {} </script>
  142.  </body>
  144.  </html>
Связанные статьи