يصف مثال المقالة طريقة JS+HTML5 لرسم ساعة ويب. يرسم ساعة مع البندول الذي يمكن استخدامه على صفحة ويب. يمكن ضبطه في الحجم والموضع من خلال الأزرار. محتوى التنفيذ المحدد هو كما يلي.
<html> <Head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> clock </title> <script type = "text/javaScript"> var xClock = 300 ؛ // center position var yclock = 250 ؛ // مركز المركز var d = 180.0 ؛ // Center Dirvius من VARE VARE VARE Surface Surface Surface Value = -d*1.07 ؛ الوظيفة ENLARGE () {d ++ ؛} دالة تقليل () {d-؛} دالة WESTWARD () {var c = document.getElementByID ("mycanvas") ؛ var g2d = c.getContext ("2d") ؛ G2D.Translate (-1،0) ؛ // قم بتعيين أصل المحور في مركز الجدول C = document.getElementById ("myPendulum") ؛ g2d = c.getContext ("2d") ؛ G2D.Translate (-1،0) ؛ // اضبط أصل المحور في مركز الجدول C = document.getElementById ("mycanvas") ؛ var g2d = c.getContext ("2d") ؛ G2D.Translate (1،0) ؛ // قم بتعيين أصل المحور في مركز الجدول C = document.getElementById ("myPendulum") ؛ g2d = c.getContext ("2d") ؛ G2D.Translate (1،0) ؛ // قم بتعيين المحور ينشأ في مركز الجدول} upward () {var c = document.getElementById ("mycanvas") ؛ var g2d = c.getContext ("2d") ؛ g2d.translate (0 ، -1) ؛ // قم بتعيين المحور ينشأ في مركز الجدول C = document.getElementById ("myPendulum") ؛ g2d = c.getContext ("2d") ؛ g2d.translate (0 ، -1) ؛ // اضبط المحور ينشأ في مركز الجدول} دالة لأسفل () {var c = document.getElementById ("mycanvas") ؛ var g2d = c.getContext ("2d") ؛ g2d.translate (0،1) ؛ // قم بتعيين المحور ينشأ في مركز الجدول C = document.getElementById ("myPendulum") ؛ g2d = c.getContext ("2d") ؛ g2d.translate (0،1) ؛ // قم بتعيين المحور ينشأ في مركز الجدول} fillpolygon (a ، b ، fillcolor ، ctx) {ctx.beginpath () ؛ ctx.moveto (a [0] ، b [0]) ؛ لـ (var j = 1 ؛ j <a.length ؛ j ++) ctx.lineto (a [j] ، b [j]) ؛ ctx.closepath () ؛ ctx.fillstyle = fillColor ؛ ctx.fill () ؛} وظيفة عشوائية () {var s = " Math.Floor (Math.Random ()*16) .ToString (16) ؛ return s ؛} function locatecoordinate () {var c = document.getElementById ("mycanvas") ؛ var g2d = c.getContext ("2d") ؛ g2d.translate (xclock ، yclock) ؛ // قم بتعيين محور الإحداثيات ينشأ في مركز الجدول var c = document.getElementById ("myPendulum") ؛ var g2d = c.getContext ("2d") ؛ g2d.translate (xclock ، yclock) ؛ // قم بتعيين محور الإحداثيات ينشأ في مركز الجدول} دالة drawface () {// تحديد طريقة السحب على سطح الساعة/* صفيف الحجم الأصغر من إحداثيات مارك علامة الماس تمثل 1 ، 2 ، 4 ، 5 ، 7 ، 10 ، 11 O'Clock*/var x = new aray (0 ، Math.Round (d/30) var y = صفيف جديد (math.round (-d*1.07) ،-d ، Math.Round (-d*0.9) ،-d) ؛/*Array of Vertex إحداثيات بحجم أكبر يمثل مواقع 3 ، 6 ، 9 ، و 12 O'Clock*/var x1 = new Array (0 ، math.rond (d/15) Array (Math.Round (-d*1.13) ،-D ، Math.Round (-d*0.9) ،-d) ؛ var c = document.getElementById ("mycanvas") ؛ var g2d = c.getContext ("2d") ؛ // beginpath () ؛ G2D.ARC (0،0 ، D ، 0 ، 2*Math.PI) ؛ g2d.strokestyle = "Lightgray" ؛ g2d.linewidth = d/18 ؛ G2D.Stroke () ؛ // السكتة الدماغية الأخيرة ، ارسم حافة دائرة الساعة // ابدأ في التحضير لرسم ماس يمثل كل ساعة لـ (var i = 0 ؛ i <12 ؛ i ++) {// للهيكل الحلقة لبيان الحلقة ، إذا (i ٪ 3 == 0) {// ارسم حجمًا أحمر حجمًا لتمثيل 3،6،9،12 نقطة (x1 ، y1 ، " } آخر {// ارسم ماسيًا برتقاليًا أصغر لتمثيل الساعات المتبقية في فيوليجون (X ، Y ، "Orange" ، G2D) ؛ } // خذ مركز الساعة كأصل ، ويتم تدوير نظام الإحداثيات في اتجاه عقارب الساعة بمقدار 30 درجة لرسم علامة الماس لموضع الساعة التالي G2D.Rotate (Math.PI/6.0) ؛ }. راديان ، هو موضع راديان من جهة ثانية محسوبة من 0 ثانية. */الوظيفة المرسومة (hradian ، mradian ، sradian) {var c = document.getElementById ("mycanvas") ؛ var g2d = c.getContext ("2d") ؛ // خذ مركز الساعة كأصل ، وتدوير Hradian Radian على مدار الساعة إلى الساعات G2D.Rotate (Hradian) ؛ // ترتيب الإحداثيات التي تمثل رؤوس المضلعة من ساعة اليد var hx = صفيف جديد (0 ، Math.Round (d/19) ، 0 ، Math.Round (-d/19)) ؛ var hy = new array (Math.Round (-d/2) ، Math.Round (-d/3) ، 0 ، Math.Round (-d/3)) ؛ Fillpolygon (HX ، HY ، "Magenta" ، G2D) ؛ // قم بتعيين يد الساعة على الأرجواني الأحمر ، // خذ مركز الساعة كأصل ، وقم بتدوير الراديان Hradian في اتجاه عقارب الساعة لاستعادة نظام الإحداثيات G2D.Rotate (-hradian) ؛ // خذ مركز الساعة كأصل ، وقم بتدوير راديان mradian في اتجاه عقارب الساعة لرسم اليد الدقيقة g2d.rotate (mradian) ؛ // صفيف الإحداثيات الذي يمثل قمة المقوى لليد الدقيقة var mx = صفيف جديد (Math.Round (-d/19) ، 0 ، math.round (d/19)) ؛ var my = new array (0 ، Math.Round (-d/1.3) ، 0) ؛ Fillpolygon (MX ، My ، "Gray" ، G2D) ؛ . // خذ الساعة كأصل ، ويقوم نظام الإحداثيات بتدوير الراديان السريدي في اتجاه عقارب الساعة لرسم الجهة الثانية g2d.rotate (sradian) ؛ // من جهة ثانية إلى اللون العشوائي g2d.strokestyle = 'الأخضر' ؛ g2d.linewidth = "1" ؛ G2D.Moveto (0،0) ؛ g2d.lineto (0 ، Math.Round (-d/1.1)) ؛ G2D.Stroke () ؛ G2D.BeginPath () ؛ g2d.arc (0 ، Math.Round (-d) ، d/18 ، 0 ، 2*Math.Pi) ؛ g2d.fillStyle = RandomColor () ؛ g2d.fill () ؛ // للسكتة الدماغية الأخيرة ، ارسم الكرة الصغيرة في قمة اليد الثانية // خذ مركز الساعة كأصل ، وقم بتدوير الراديان المعاكس في اتجاه عقارب الساعة لاستعادة نظام الإحداثيات G2D.Rotate (-sradian) ؛ } // كتلة الكود لطريقة إبرة الرسم المرسومة/* ارسم سلسلة لتمثيل الوقت الفوري*/وظيفة drawtime () {var time = new Date () ؛ // احصل على الوقت الحالي. var hour = time.gethours () ؛ // الحصول على ساعة var دقيقة = time.getMinutes () ؛ // احصل على دقيقة var second = time.getSeconds () ؛ // احصل على عدد الثواني var apm = "am" ؛ // العرض الافتراضي صباح: صباحا. var canvas = document.getElementById ("mycanvas") ؛ var g2d = canvas.getContext ("2d") ؛ if (ساعة> 12) {// توقف عن عرض الساعة = الساعة 12 ؛ APM = "PM" ؛ } if (دقيقة <10) {// إذا كان هناك رقم واحد فقط في الدقيقة ، أضف 0 لعرض Minute = "0"+دقيقة ؛ } إذا (الثاني <10) {// إذا كان عدد الثواني هو رقم واحد فقط ، فأضف 0 لعرض Second = "0"+Second ؛ } g2d.clearrect (-xclock ، -yclock ، 600،600) ؛ // Clean Screen var s = ساعة+":"+دقيقة+":"+ثانية+":"+APM ؛ g2d.fillStyle = "Red" ؛ g2d.font = d/4+ "px kaiti" ؛ g2d.filltext (s ، -d/1.8 ، d*1.4) ؛ g2d.font = d/4 + "px kaiyi" ؛ // إنشاء التدرج التدرج = g2d.CreatelIneArgradient (0،0 ، canvas.width ، 0) ؛ التدرج gradientg2d.fillstyle = gradient ؛ g2d.filltext ("البيانات الكبيرة" ،-d/2.6 ، d/2) ؛ // الحصول على القراءة الثانية لحظة إنشاء المثيل ، وحساب قراءة القوس من اليد الثانية ، نسبة إلى 0 ثانية ، var c = math.pi/30 * ثانية ؛ // احصل على القراءة الدقيقة للحظة الخلق ، وحساب قراءة القوس ليد الدقيقة ، var b = math.pi/30 * دقيقة ؛/ * احصل على قراءة ساعة لحظة الخلق ، وحساب قراءة القوس ليد الساعة ، نسبة إلى 0 نقطة ، وحساب قراءة القوس لقراءة القوس ليد الساعة. * درجة الراديان التي يسير في الساعة هي النقطة بالساعة (30 درجة في الساعة) ، بالإضافة إلى قيمة تصحيح عدد الدقائق التي تم تمريرها*/var a = math.pi/180* (30* ساعة + دقيقة/2) ؛/* يتم ترجمة نظام الإحداثيات (xclock ، yclock) بحيث يصبح المحور التنسيق هو الوسط للطلاب* السحب () ؛ drawneedles (a ، b ، c) ؛ } // نهاية كتلة الكود للطريقة drawtime var i = 0 ؛ function pendulum () {// pendulum_bobvar instantangle = new Array (64،61،56،49،40،29،16،3 ، -8 ، -16 ، -29 ، -40 ، -49 ، -56 ، -61 ، -64 ،----- 64 ، -64 ، -61 ، -56 ، -49 ، -40 ، -29 ، -16 ، -8،3،16،29،40،49،56،61،64،64) ؛ . // قم بتعيين اليد الثانية على اللون العشوائي ctx.fillstyle = 'brown' ؛ ctx.fillRect (-3،0،6 ، d*1.4) ؛ ctx.shadowblur = 20 ؛ ctx.shadowcolor = "black" ؛ ctx.fillstyle = "blue" ؛ // ctx.fillrect (-d/3.5 ، d*1.35 ، d/1.6 ، d/4.4) ؛ ctx.font = "40px kaiyi" ؛ // إنشاء التدرج التدريجي = ctx.createLineArgradient (0،0 ، c.width ، 0) ؛ gradient.addcolorstop ("0" ، مع التدرج // ctx.fillstyle = التدرج ؛ ctx.fillstyle = "red" ؛ ctx.filltext ("البيانات الكبيرة" ،-d/3.2 ، d*1.55) ؛ ctx.shadowblur = 0 ؛ ctx.shadowcolor = null ؛ ctx.fillstyle = null ؛ ctx.rotate (-alpha) ؛ } إعداد الوظيفة () {locatecoordinate () setInterval ('drawtime ()' ، 500) ؛ setInterval ('pendulum ()' ، 200) ؛} </script> <style> #mycanvas {z-index: 3 ؛ الموقف: مطلق ؛ اليسار: 0px ؛ أعلى: 0px ؛ } #mypendulum {z-index: 2 ؛ الموقف: مطلق ؛ اليسار: 0px ؛ TOP: 0px ؛}#controlPanel {position: absolute ؛ اليسار: 600 بكسل ؛ أعلى: 0px ؛ العرض: 100px ؛ محاذاة النص: المركز ؛ Font-Family: "Kaiti" ؛ حجم الخط: 20 بكسل ؛ خط الرصيف: جريئة ؛ اللون:#6C0 ؛} </style> </head> <body onload = "preparation ()"> <canvas id = "mycanvas"> <p> لا يدعم المتصفح الخاص بك عنصر القماش! </p> </p> </canvas id = "myPendulum"> <p> id = "controlpanel"> <table> <tr> <td> التحكم </td> <td> زر </td> </td> <td> <tr value = "enlarge" type = "button" onClick = "ENLARGE ()"> </uttric> </td> <td> <td value = "sype =" button " OnClick = "LEMPER ()"> </utton> </td> </tr> <tr> <td> <input value = "left" type = "button" onClick = "Westwards ()"> </utton> </td> <td> <input value = "right" type = "button" onclick = "eastward () type = "button" onClick = "Upwards ()"> </button> </td> <td> <input value = "downwards" type = "button" onClick = "Downwards ()"> </td>صورة التكاثر:
آمل أن تكون هذه المقالة مفيدة لبرمجة الويب للجميع.