دعونا ننظر أولاً إلى تأثير الساعة الجسيمية، كما يلي:
أدناه سنقوم بتنفيذ ذلك من خلال Canvas و JS،
أولاً، قم بإنشاء ملف html وأضف لوحة قماشية، كما يلي:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> .container{ Margin: 0, auto; width: 600px; </head><body> <div id=container> <canvas id=canvas></canvas> </div></body>بعد ذلك، قم باستيراد المادة digit.js. تتكون المادة من أرقام باستخدام مصفوفات ثنائية الأبعاد. هناك إجمالي عشرة أحرف: 0-9 ونقطتين، كما يلي:
يمكنك أن ترى أن الأحرف 1 تتكون من
لنبدأ في إنشاء اللوحة القماشية:
function Clock() { var Canvas = document.getElementById(canvas.width = 600; Canvas.height = 100; this.cxt = Canvas.getContext('2d'); .cxt.fillRect(0, 0, 500, 100 });يمكن للكود أعلاه رسم لوحة قماشية رمادية صغيرة في المتصفح
لنبدأ بالتحليل أدناه:
1. فهم مصفوفة البيانات؟ إنها مصفوفة متعددة الأبعاد
2. كيفية رسم دائرة؟
2.1 هل تحتاج إلى معرفة نصف القطر أولاً؟
وكما يتبين من الشكل أعلاه فإن مواضع مركز الدائرة هي:
ص+1ص+1 + (ص+1)*2*1ص+1 + (ص+1)*2*2. . . ص+1 + (ص+1)*2*ط
وفي الوقت نفسه، يمكن أيضًا الحصول على نصف القطر عن طريق حساب ارتفاع الدائرة، كما يلي:
ارتفاع الدائرة هو (r+1)*2، وارتفاع اللوحة يتكون من 10 دوائر.
ارتفاع القماش = (ص+1)*2*10
إذا تم ضبط ارتفاع القماش على 100، فسيظهر r، وسيظهر أيضًا مركز الدائرة xy، وسيبدأ رسم الدائرة.
أولاً، قم بإضافة عبارة إلى كائن الساعة أعلاه لحساب r
this.r = 100/20-1;
بعد ذلك، أقوم بإضافة طريقة الرسم إلى النموذج الأولي للساعة.
Clock.prototype.draw = function(num, Index) { this.cxt.fillStyle=#000; for (let i=0; i<digit[num].length; i++) { for (let j=0; j< digit[num][i].length; j++) { if (digit[num][i][j] == 1) { this.cxt.beginPath(); this.cxt.arc(index*70+(this.r+1)+(this.r+1)*2*j, (this.r+1)+(this.r+1)*2*i, this.r, 0, Math.PI*2, false); this.cxt. ClosePath(); this.cxt.fill();يتلقى الرسم معلمتين، الأولى هي فهرس الأحرف، والثانية هي تسلسل إزاحة الأحرف، و70 هي مسافة الإزاحة، والتي يمكن تخصيصها.
الأول لـ يحصل على مصفوفة الأحرف المراد عرضها والثاني لـ يأخذ كل سطر للعرض ويعرضه كـ 1 فقط. المعلمات لرسم دائرة هي بشكل أساسي x، y، r.
بعد ذلك، نحتاج إلى الحصول على الوقت. يمكننا الحصول مباشرة على الوقت من التاريخ الجديد باستخدام القواعد العادية، كما يلي:
Clock.prototype.getTime = function() { var reg = /(/d)(/d):(/d)(/d):(/d)(/d)/.exec(new Date()); var data = []; data.push(reg[1], reg[2], 10, reg[3], reg[4], 10, reg[5], reg[6]); i=0; i<data. length; i++) { this.draw(data[i], i);يمكنك بسهولة الحصول على الساعات والدقائق والثواني من خلال التعبيرات العادية. عند الضغط على المصفوفة، انتبه إلى التنسيق المقابل الذي يمثل الحرف العاشر في digit.js، وهو النقطتان.
لاحظ أنه ستكون هناك مشكلة في الرسم بهذا الشكل، أي أنه لا يمكن تحديث اللوحة القماشية. يمكنك إضافة هذا
قماش. الارتفاع = 100
الآن يمكنك تشغيل الكود كالتالي:
فار ساعة = ساعة جديدة();setInterval(()=>{ Clock.getTime(); })حسنًا، هذا جيد
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.