หน้าแรก>การสอนการออกแบบเว็บไซต์>กวดวิชา HTML

ตัวอย่างที่ใช้การโหลดการเลียนแบบ HTML5 Canvas

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-28 11:48:02

ตัวอย่างนี้คืออินสแตนซ์การโหลดเว็บการโหลดเว็บ HTML5 Canvas การเรนเดอร์มีดังนี้:

รหัสตัวอย่าง: (ที่อยู่ตัวอย่าง: 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.  Padding: 0;
  13.  -
  15.  บทความ, ส่วน, ส่วนหัว, ส่วนท้าย {
  16.  แสดง: บล็อก;
  17.  -
  19.  #wrapper {
  20.  ความกว้าง: 600px;
  21.  มาร์จิ้น: 0auto;
  22.  ความเป็นมา: #fffurl (images/shade.jpg) ซ้ำ -xcenterbottom;
  23.  -MOZ-Border-Radius: 10px;
  24.  -webkit-Border-Radius: 10px;
  25.  ชายแดนด้านบน: 1pxsolid#ffff;
  26.  Padding-bottom: 76px;
  27.  -
  29.  H1 {
  30.  Padding-Top: 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.  <script>
  55.  //fordiscussionandcomments,see:http://remysharp.com/2009/01/07/html5-enabling-script/
  56.  (function () {ถ้า (!/*@cc_on!@*/0) return; vare = abbr, บทความ, กัน, เสียง, bb, canvas, dataGrid, datalist, รายละเอียด, กล่องโต้ตอบ, eventsource, รูป, foo ter, ส่วนหัว, เครื่องหมาย, เมนู, มิเตอร์, NAV, เอาท์พุท, ความคืบหน้า, ส่วนเวลา, video.split (','), i = e.length; ในขณะที่ (i-) {document.createelement (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.  <script>
  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.getElementByTagname ('บทความ') [0] .AppendChild (Canvas);
  79.  varctx = canvas.getContext (2d)
  80.  i = 0, degrees = data.degrees, loops = 0, degreeslist = [];
  82.  สำหรับ (i = 0; i <degrees; i ++) {
  83.  Degreeslist.push (i);
  84.  -
  86.  // รีเซ็ต
  87.  i = 0;
  89.  // soicankillitlater
  90.  window.canvastimer = setInterval (วาด, 1,000/องศา);
  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 = ขวา concat (ซ้าย);
  98.  -
  100.  functionDraw () {
  101.  VARC, S, E;
  103.  vard = 0;
  105.  ถ้า (i == 0) {
  106.  รีเซ็ต ();
  107.  -
  109.  ctx.save ();
  111.  d = องศาลิสต์ [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.  <script>
  134.  vargajshost = ((https: == document.location.protocol)? https: // ssl .: http: // www.);
  135.  document.write (unescape (%3cscriptsrc = '+gajshost+Google-analytics.com/ga.js'type =' ข้อความ/javascript '%3e%3c/สคริปต์%3e));
  136.  </script>
  137.  <script>
  138.  พยายาม{
  139.  varpagetracker = _gat._getTracker (UA-1656750-18);
  140.  Pagetracker._trackPageView ();
  141.  } catch (err) {} </script>
  142.  </body>
  144.  </html>
บทความที่เกี่ยวข้อง