ホーム>Web デザインのチュートリアル>HTMLチュートリアル

HTML5 Canvas模倣の負荷を使用した例

著者：Eve Cole 更新時間：2025-03-28 11:48:02

この例は、HTML5キャンバスシミュレーションWebロードロードインスタンスです。レンダリングは次のとおりです。

例コード：（プレビューアドレス：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. 体{
  8. フォント：normal16px/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（images/shade.jpg）Repeat-XcenterBottom;
  23.  -moz-border-radius：10px;
  24.  -webkit-border-radius：10px;
  25. ボーダートップ：1pxSolid＃ffff;
  26. パディングボトム：76px;
  27.  }
  29.  H1 {
  30. パディングトップ：10px;
  31.  }
  33.  H2 {
  34. フォントサイズ：100％;
  35. フォントスタイル：イタリック;
  36.  }
  38. ヘッダ、
  39. 記事>*、
  40. フッター、
  41.  footerp {
  42. マージン：20px;
  43.  }
  45. フッター>*{
  46. マージン：20px;
  47. 色：＃999;
  48.  }
  50. 記事{
  51. 位置：相対;
  52.  }
  53.  </style>
  54.  <スクリプト>
  55.  //fordiscussionandcomments、see：http：//remysharp.com/2009/01/07/html5-enabling-script/
  56.  （function（）{if（！/*@cc_on！@*/0）return; vare = abbr、aftion、adas、audio、bb、canvas、datagrid、datalist、details、dialog、eventsource、figure、foo ter、ヘッダー、マーク、メニュー、メーター、nav、output、progress、section、time、video.split（ '、'）、i = e.length; while（i-）{document.createelment（e [i]）}}）（
  57.  </script>
  58.  </head>
  59.  <body>
  60.  <sectionId = wrapper>
  61.  <ヘッダー>
  62.  <h1> canvas </h1>
  64.  </header>
  65.  <記事> </記事>
  66.  <footer> <ahref =/> html5demo </a> </footer>
  67.  </section>
  68.  <scriptsrc = h5utils.js> </script>
  69.  <スクリプト>
  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.  //リセット
  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.  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.  <スクリプト>
  134.  vargajshost =（（https：== document.location.protocol）？https：// ssl。：http：// www。）;
  135.  document.write（unescape（％3cscriptsrc = '+gajshost+google-analytics.com/ga.js's'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>
関連記事