홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML5 캔버스 모방 로딩을 사용하는 예

저자：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 : 캔버스 </title>
  6.  <스타일>
  7.  몸{
  8.  글꼴 : normal16px/20pxhelvetica, sans-serif;
  9.  배경 : RGB (237,237,236);
  10.  여백 : 0;
  11.  마진-탑 : 40px;
  12.  패딩 : 0;
  13.  }
  15.  기사, 섹션, 헤더, 바닥 글 {
  16.  디스플레이 : 블록;
  17.  }
  19.  #싸개{
  20.  너비 : 600px;
  21.  여백 : 0auto;
  22.  배경 : #fffurl (images/shade.jpg) 반복-XCENTERBOTTOM;
  23.  -Moz 국경 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.  바닥 글 {
  42.  마진 : 20px;
  43.  }
  45.  바닥 글>*{
  46.  마진 : 20px;
  47.  색상 :#999;
  48.  }
  50.  기사{
  51.  위치 : 상대;
  52.  }
  53.  </스타일>
  54.  <cript>
  55.  //fordiscussionandcomments, see:http://remysharp.com/2009/01/07/html5-enabling-script/
  56.  (function () {if (!/*@cc_on!@*/0) return; vare = abbr, article, article, audio, bb, canvas, datagrid, datalist, 세부 사항, 대화, 이벤트 소스, 그림, foo Ter, Header, Mark, Menu, Meter, Nav, Nav, 출력, 진행, 섹션, Time, Video.split ( ','), i = e.length; while (i-) {document.createElement (e [i])}) ()
  57.  </스크립트>
  58.  </head>
  59.  <body>
  60.  <sectionid = 래퍼>
  61.  <Header>
  62.  <H1> 캔버스 </h1>
  64.  </헤더>
  65.  <기사> </article>
  66.  <FUTER> <ahref =/> html5demo </a> </풋내기>
  67.  </섹션>
  68.  <scriptsrc = h5utils.js> </script>
  69.  <cript>
  71.  buildSpinner ({x : 50, y : 50, 크기 : 20,도 : 30});
  73.  functionBuildSpinner (데이터) {
  75.  varcanvas = document.createElement ( 'canvas');
  76.  Canvas.height = 100;
  77.  Canvas.width = 300;
  78.  document.getElementsByTagName ( 'article') [0] .AppendChild (캔버스);
  79.  varctx = canvas.getContext (2d),
  80.  i = 0, ecress = data.degrees, loops = 0, exgreeslist = [];
  82.  for (i = 0; i <도; i ++) {
  83.  fegreeslist.push (i);
  84.  }
  86.  //다시 놓기
  87.  i = 0;
  89.  // SOICANKILLITLATER
  90.  window.canvastimer = setInterval (드로우, 1000/도);
  92.  functionset () {
  93.  ctx.clearrect (0,0,100,100); // clearcanvas
  95.  varleft = degreeslist.slice (0,1);
  96.  varright = degreeslist.slice (1, degreeslist.length);
  97.  gegreeslist = right.concat (왼쪽);
  98.  }
  100.  functiondraw () {
  101.  varc, s, e;
  103.  vard = 0;
  105.  if (i == 0) {
  106.  다시 놓기();
  107.  }
  109.  ctx.save ();
  111.  d = thegreeslist [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.  </스크립트>
  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.  </스크립트>
  137.  <cript>
  138.  노력하다{
  139.  varpagetracker = _gat._getTracker (UA-1656750-18);
  140.  pagetracker._trackPageView ();
  141.  } catch (err) {} </script>
  142.  </body>
  144.  </html>
관련 기사