Beranda>Tutorial Desain Web>tutorial HTML

Contoh Menggunakan Pemuatan Imitasi Kanvas HTML5

Penulis：Eve Cole Waktu Pembaruan：2025-03-28 11:48:02

Contoh ini adalah instance pemuatan Web Simulasi Canvas HTML5. Rendering adalah sebagai berikut:

Kode Contoh: (Alamat Pratinjau: http://html5demos.com/canvas)

  1.  <! Doctypehtml>
  2.  <htmlang = enxmlns = http: //www.w3.org/1999/xhtml>
  3.  <head>
  4.  <METAHTTP-EQUIV = Content-TypeContent = Text/html; charset = UTF-8/>
  5.  <title> html5demo: canvas </iteme>
  6.  <tyle>
  7.  tubuh{
  8.  Font: Normal16px/20pxhelvetica, sans-serif;
  9.  Latar belakang: RGB (237.237.236);
  10.  Margin: 0;
  11.  margin-top: 40px;
  12.  Padding: 0;
  13.  }
  15.  Artikel, bagian, header, footer {
  16.  Tampilan: Blok;
  17.  }
  19.  #pembungkus{
  20.  Lebar: 600px;
  21.  Margin: 0Auto;
  22.  Latar Belakang: #FFFURL (Images/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.  Ukuran font: 100%;
  35.  Font-style: Italic;
  36.  }
  38.  header,
  39.  Artikel>*,
  40.  footera,
  41.  footerp {
  42.  margin: 20px;
  43.  }
  45.  footer>*{
  46.  margin: 20px;
  47.  Warna:#999;
  48.  }
  50.  artikel{
  51.  Posisi: kerabat;
  52.  }
  53.  </tyle>
  54.  <script>
  55.  //Fordiscussionandcomments ,see:http://remysharp.com/2009/01/07/html5-enabling-script/
  56.  (function () {if (!/*@cc_on!@*/0) return; vare = abbr, artikel, samping, audio, bb, kanvas, datagrid, distalist, detail, dialog, eventsource, gambar, foo ter, header, tanda, menu, meter, nav, output, kemajuan, bagian, waktu, video.
  57.  </script>
  58.  </head>
  59.  <body>
  60.  <SectionId = Wrapper>
  61.  <Header>
  62.  <h1> Canvas </h1>
  64.  </teader>
  65.  <cartikel> </artikel>
  66.  <footer> <haRref =/> html5demo </a> </footer>
  67.  </section>
  68.  <ScriptSrc = h5utils.js> </script>
  69.  <script>
  71.  buildspinner ({x: 50, y: 50, ukuran: 20, derajat: 30});
  73.  FunctionBuildSpinner (data) {
  75.  varcanvas = document.createElement ('Canvas');
  76.  Canvas.Height = 100;
  77.  Canvas.width = 300;
  78.  document.getElementsbyTagname ('artikel') [0] .AppendChild (Canvas);
  79.  varctx = canvas.getContext (2D),
  80.  i = 0, derajat = data.
  82.  untuk (i = 0; i <degrees; i ++) {
  83.  DegReesList.push (i);
  84.  }
  86.  //mengatur ulang
  87.  i = 0;
  89.  // soicankillitlater
  90.  window.canvastimer = setInterval (gambar, 1000/derajat);
  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 (kiri);
  98.  }
  100.  functionDraw () {
  101.  varc, s, e;
  103.  vard = 0;
  105.  if (i == 0) {
  106.  mengatur ulang();
  107.  }
  109.  ctx.save ();
  111.  d = DegReesList [i];
  112.  C = Math.floor (255/derajat*i);
  113.  ctx.strokestyle = 'rgb ('+c+','+c+','+c+')';
  114.  ctx.linewidth = data.size;
  115.  ctx.beginpath ();
  116.  s = math.floor (360/derajat*(d));
  117.  E = Math.floor (360/derajat*(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> = derajat) {
  126.  i = 0;
  127.  }
  128.  }
  129.  }
  132.  </script>
  133.  <script>
  134.  vargaajshost = ((https: == document.location.protocol)? https: // ssl .: http: // www.);
  135.  document.write (unescape (%3cscriptsrc = '+gajshost+google-analytics.com/ga.js'type =' text/javascript '%3e%3c/skrip%3e));
  136.  </script>
  137.  <script>
  138.  mencoba{
  139.  varpagetracker = _gat._gettracker (ua-1656750-18);
  140.  pagetracker._trackpageView ();
  141.  } catch (err) {} </script>
  142.  </body>
  144.  </html>
Artikel Terkait