الصفحة الرئيسية>دروس تصميم الويب>تعليمي HTML

مثال باستخدام تحميل تقليدي HTML5

الكاتب：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.  الهامش: 40 بكسل ؛
  12.  الحشو: 0 ؛
  13.  }
  15.  مقال ، قسم ، رأس ، تذييل {
  16.  العرض: كتلة ؛
  17.  }
  19.  #إزار{
  20.  العرض: 600 بكسل ؛
  21.  الهامش: 0AUTO ؛
  22.  الخلفية: #fffurl (الصور/الظل.
  23.  -moz-border-Radius: 10px ؛
  24.  -webkit-border-Radius: 10px ؛
  25.  أعلى الحدود: 1pxsolid#ffff ؛
  26.  حشوة القاع: 76 بكسل ؛
  27.  }
  29.  H1 {
  30.  الحشو أعلى: 10 بكسل ؛
  31.  }
  33.  H2 {
  34.  حجم الخط: 100 ٪ ؛
  35.  على غرار الخط: مائل ؛
  36.  }
  38.  رأس ،
  39.  المادة>*،
  40.  فذي ،
  41.  تذييل {
  42.  الهامش: 20 بكسل ؛
  43.  }
  45.  تذييل>*{
  46.  الهامش: 20 بكسل ؛
  47.  اللون:#999 ؛
  48.  }
  50.  شرط{
  51.  الموقف: قريب
  52.  }
  53.  </style>
  54.  <script>
  55.  //fordiscussionandcomments،see:http://remysharp.com/2009/01/07/html5-enabling-script/
  56.  (function () {if (!/*@cc_on!@*/0) return ؛ vare = abbr ، article ، جانبا ، الصوت ، bb ، canvas ، dataGrid ، datalist ، التفاصيل ، مربع الحوار ، eventsource ، الشكل ، foo ter ، header ، mark ، menu ، meter ، nav ، output ، التقدم ، القسم ، الوقت ، video.split ('،') ، i = e.length ؛
  57.  </script>
  58.  </head>
  59.  <body>
  60.  <sectionId = clospper>
  61.  <header>
  62.  <h1> قماش </h1>
  64.  </header>
  65.  <article> </tistr>
  66.  <Tower> <hhref =/> html5demo </a> </tower>
  67.  </القسم>
  68.  <scriptsrc = h5utils.js> </script>
  69.  <script>
  71.  BuildSpinner ({x: 50 ، y: 50 ، الحجم: 20 ، درجات: 30}) ؛
  73.  وظيفة buildspinner (البيانات) {
  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 <degrees ؛ i ++) {
  83.  degreeslist.push (i) ؛
  84.  }
  86.  //إعادة ضبط
  87.  أنا = 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.  إذا (i == 0) {
  106.  إعادة ضبط()؛
  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.  إذا (i> = الدرجات) {
  126.  أنا = 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 =' text/javaScript '٪ 3e ٪ 3c/script ٪ 3e)) ؛
  136.  </script>
  137.  <script>
  138.  يحاول{
  139.  varpageTracker = _gat._getTracker (UA-1656750-18) ؛
  140.  pageTracker._trackPageView () ؛
  141.  } catch (err) {} </script>
  142.  </body>
  144.  </html>
مقالات ذات صلة