تقدم هذه المقالة نموذج التعليمات البرمجية لمكون العد التنازلي لحلقات القماش وتشاركه مع الجميع، والتفاصيل هي كما يلي:
التأثير كما هو موضح في الشكل 1:
مكون العد التنازلي لحلقات القماشالعد التنازلي لحلقات القماش هو عد تنازلي يتم تنفيذه استنادًا إلى Canvas ويوصى باستخدامه على الأجهزة المحمولة.
عنوان تنزيل العد التنازلي للحلقة القماشية
1. كيفية الاستخدام1. كود أتش تي أم أل
يمكن تسمية سمة المعرف بشكل تعسفي
<معرف القماش=canvas></canvas>
2. تقديم ملفprocess.js
مرجع الصفحة
<script src=js/process.js></script>
3. معلمات التهيئة
مجرد إنشاء مثيل
<script> window.onload = function () { Let ctd = new Countdown(); ctd.init() };</script> 2. وصف معلمات الإعداداتالمعلمات التالية غير مطلوبة ويمكن تهيئتها وفقًا للاحتياجات المحددة.
window.onload = function () { Let ctd = new Countdown(); ctd.init({ id: Canvas, // ID، يجب أن تحتوي اللوحة القماشية على حجم سمة المعرف: 130، // الحد الأقصى لحجم رسم دائرة، العرض = عرض الحدود العالية: 4، // عرض الحدود borderColor: #fff، // لون الحدود الخارجي: #fff، // جدول ألوان الدائرة السفلية الخارجية: #fff، // لون الخط المتحرك لشريط التقدم: #fff، // لون الخط RingColor: #ffc720، // لون حلقة شريط التقدم الداخلي: #4e84e5، // لون خلفية الدائرة الداخلية حجم الخط: 50، الوقت: 5 }); 3. نموذج التعليمات البرمجيةأتش تي أم أل
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>العنوان</title> <style> body { الخلفية: #c2c1ce } .container { الموضع: اليسار المطلق: 50%؛ الأعلى: 50%؛ تحويل: ترجمة (-50%، -50%)؛ center; } </style></head><body><div class=container> <canvas class=canvas id=canvas></canvas></div><script src=js/process.js></script; ><script> window.onload = function () { Let ctd = new Countdown(); ctd.init() };</script></body></html>js
/** * تم الإنشاء بواسطة Tan Xi بتاريخ 2018/3/15. */function Countdown() { // قم بتعيين المعلمات الافتراضية this.settings = { id: Canvas, // ID، يجب أن تحتوي اللوحة القماشية على حجم سمة المعرف: 130، // الحد الأقصى لحجم رسم دائرة، العرض = الارتفاع borderWidth: 4، // عرض الحدود borderColor: #fff، // لون الحدود ExternalColor: #fff، // جدول ألوان الدائرة السفلية الخارجية: #fff، // لون خط الرسوم المتحركة لشريط التقدم: #fff، // لون الخط RingColor: #ffc720، // لون حلقة شريط التقدم الداخلي: #4e84e5، // لون خلفية الدائرة الداخلية حجم الخط: 50، الوقت: 5 }}Countdown.prototype.init = function (opt) { this.obj = document.getElementById(this.settings.id); this.obj.width = this.settings.size; this.obj.height = this.settings.size; this.settings, opt); this.countdown();};// ارسم لون الخلفية Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// رسم خلفية الرسوم المتحركة لشريط التقدم Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / رسم العد التنازلي Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.strokeBorder(this.settings.borderWidth);};// رسم الرسوم المتحركة لشريط التقدم Countdown.prototype.drawAnimate = function () { // زاوية الدوران Let deg = Math.PI / 180; v = جدول * 360، startAng = -90، endAng = -90 + v؛ this.ctx.beginPath(); this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size) / 2 -3, startAng * deg, endAng * deg, false); this.ctx. ClosePath();};// ارسم الحدود Countdown.prototype.strokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx.strokeStyle = this.settings.borderColor this.ctx. السكتة الدماغية ()؛}؛// ارسم النص Countdown.prototype.strokeText = function (text) { this.ctx.textAlign = center; this.ctx.textBaseline = middle; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; 2, this.settings.size / 2);};// ارسم دائرة Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) { Let deg = Math.PI / 180; this.ctx.beginPath(); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -border, startAng * deg, endAng * deg, false); this.ctx. ClosePath();};// الرسوم المتحركة لشريط التقدم Countdown.prototype.countdown = function () { Let oldTime = +new Date(); الوقت * 1000,// على سبيل المثال، 30*1000=30 000 مللي ثانية currentTime = +new Date(); حجم الخطوة = (الوقت الحالي - الوقت الماضي) / إجمالي عدد الثواني جدول = (الوقت الحالي - الوقت القديم) / allMs = جدول this.drawAll(schedule); أعد رسم this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); ClearInterval(timer); } }, 100);};// ارسم الكل Countdown.prototype.drawAll = function (schedule) { جدول = جدول >= 1 ?: جدول زمني = parseInt(this.settings.time * (1 - جدول)) + 1; // امسح اللوحة القماشية this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); this.strokeText(text);};// وظيفة نسخ الكائن Extend(obj1,obj2){ for(let attr in) obj2){ obj1[attr] = obj2[attr] }} 4. أعمال إعداد القماش الإضافيفي الواقع، Canvas ليست غامضة إلى هذا الحد، فهي ليست أكثر من علامة H5، تمامًا مثل علامات HTML الأخرى:
<معرف القماش=canvas></canvas>
لاحظ أنه من الأفضل ضبط عرض اللوحة القماشية وارتفاعها في البداية (إذا لم تقم بتعيين العرض والارتفاع، فسيقوم المتصفح افتراضيًا بتعيين حجم اللوحة القماشية على 300 بكسل عرضًا و100 بكسل ارتفاعًا)، ولا يمكنه ذلك يتم ضبطه باستخدام CSS (سيتم سحبه بامتداد)، فمن المستحسن الكتابة مباشرة داخل علامة اللوحة القماشية:
<معرف القماش=عرض القماش=130 الارتفاع=130></canvas>
لا تتمتع Canvas نفسها بأي إمكانات رسم، ويتم تنفيذ جميع أعمال الرسم من خلال js. عادةً ما نستخدم getElementById في js لتشغيل اللوحة القماشية (وهذا يعني أنه يتعين علينا تعيين معرف لللوحة القماشية):
var c = document.getElementById(canvas);var ctx = c.getContext(2d);
1. بعد إعداد الفرشاة، يمكنك البدء في رسم الحلقات وهي في الواقع دوائر متحدة المركز ذات أنصاف أقطار مختلفة. إحداثيات المركز هي (الحجم/2، الحجم/2). .
Let deg = Math.PI / 180; // beginPath() يمكنه عزل تأثير رسم المسار ومنع تلوث التأثيرات السابقة. ctx.beginPath();// tcx.arc(درجة مركز الدائرة, 360 * درجة, خطأ);ctx.fillStyle = #fff;ctx.fill();ctx. ClosePath();
2. ابدأ برسم الدائرة السفلية الصفراء الثانية، مركز الدائرة أيضًا (الحجم/2، الحجم/2)، لكن نصف القطر أصغر بمقدار 4 بكسل من الدائرة السفلية البيضاء، لذا فإن نصف قطر الدائرة السفلية الصفراء هو (الحجم /2-4)
Let deg = Math.PI / 180; // beginPath() يمكنه عزل تأثير رسم المسار ومنع التأثيرات السابقة من التلوث. ctx.beginPath();//tcx.arc(مركز الدائرة 0* درجة, 360 * درجة, خطأ);ctx.fillStyle = #fff;ctx.fill();ctx. ClosePath();
3. ابدأ برسم دائرة داخلية زرقاء، بحيث يكون مركز الدائرة (الحجم/2،الحجم/2) ونصف القطر (الحجم-23)، ثم أضف حدودًا بيضاء بحجم 4 بكسل إليها.
Let deg = Math.PI / 180; // beginPath() يمكنه عزل تأثير رسم المسار ومنع التأثيرات السابقة من التلوث. ctx.beginPath();// tcx.arc(مركز الدائرة 0* درجة، 360 * درجة، خطأ)؛ctx.fillStyle = #fff;ctx.fill();ctx. ClosePath();// الحدود البيضاء ctx.lineWidth = 4;ctx.strokeStyle = #fff;ctx.stroke();
4. ارسم النص وقم بتوسيطه عموديًا
ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (نص، إحداثي X بالنسبة إلى اللوحة القماشية، إحداثي Y بالنسبة إلى اللوحة القماشية) ctx.fillText(30, size / 2) الحجم / 2)؛
5. كيفية إنشاء الرسوم المتحركة؟ في الواقع، إنها أيضًا عملية رسم دائرة بيضاء، وهي عملية تغطية شريط التقدم الأصفر ببطء ثم رسم الدائرة البيضاء أولاً، وفي هذا الوقت سيتم تغطية الدائرة الزرقاء بالدائرة المتحركة البيضاء ، سيتم رسم الدائرة الزرقاء الأخيرة حسنًا.
Let deg = Math.PI / 180;ctx.beginPath();// tcx.arc(مركز الدائرة X، مركز الدائرة Y، نصف القطر، زاوية البداية، زاوية النهاية، في اتجاه عقارب الساعة وعكس اتجاه عقارب الساعة)؛ctx.arc(size / 2, الحجم / 2، الحجم / 2-4، 0* درجة، 360 * درجة، خطأ)؛ctx.fillStyle = #fff;ctx.fill();ctx. ClosePath();
6. اكتملت عملية الرسم البسيطة نسبيًا. بعد ذلك، نحتاج إلى ربط الرسوم المتحركة بالأرقام. باستخدام آخر وقت حالي - أقرب وقت، ثم قسمة الوقت الإجمالي، يمكننا الحصول على نسبة مئوية رئيسية تغيير الأرقام والزاوية التي يتم رسم الدائرة البيضاء المتحركة بها.
Countdown.prototype.countdown = function () { Let oldTime = +new Date(); // الوقت الماضي: 1522136419291 timer = setInterval(() => { LetcurrentTime = +new Date(); // الوقت الحالي: 1522136419393 Let allMs = this.settings.time * 1000;// إجمالي الوقت بالثواني: مثل 30*1000=30000 مللي ثانية جدول = (currentTime - oldTime) / allMs;// نسبة الرسم: (1522136419393-1522136419291)/30000=0.0204 this.schedule = session; إذا (currentTime - oldTime >= allMs) {// Redraw this.drawBackground(); this.drawProcess(); this.drawInner(); this.strokeText(0); ClearInterval(timer); }; .prototype.drawAll = function (schedule) { جدول = جدول >= 1 ? 1 : جدول؛ Let text = parseInt(this.settings.time * (1 - جدول)) + 1; // امسح اللوحة القماشية this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawAnimate ( ); this.drawInner(); this.strokeText(text);};// رسم الرسوم المتحركة لشريط التقدم Countdown.prototype.drawAnimate = function () { // زاوية الدوران Let deg = Math.PI / 180; .size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.fill(); ;نسخة موجهة نحو العملية
/** * الرسوم المتحركة لشريط التقدم*/ countdown: function () { this.getSystemInfo().then(v => { // Adaptive Let width = v.windowWidth, size = width >= 414 ? 66 : 400 / 414 * 66; size = parseInt(size); size = size % 2 ? size + 1 : size; = setInterval(() => { Let time = maxtime * 1000,currentTime = +تاريخ جديد، جدول = (currentTime - sTime) / الوقت؛ this.drew(schedule, maxtime, size); if (currentTime - sTime >= time ) { // رسم النص this.setData({ جدول: 0 }); ClearInterval(temp); draw*/ draw: function (schedule, val, size) { size = size ||.const _ts = this; جدول = جدول >= 1 : جدول زمني; = الحجم / 2، درجة = Math.PI / 180 _ts.setData({ العرض: الحجم، الارتفاع: الحجم، الجدول الزمني: نص + 1 }); امسح اللوحة القماشية ctx.clearRect(0, 0, size, size); // ارسم خلفية بيضاء ctx.beginPath(); ctx.arc(r, r, r, 0 * deg, 360 * deg); = ' ctx.fill(); رسم ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(248,200,80,1)'; ctx.fill(); // ارسم شريط تقدم أبيض Let v = جدول * ctx.beginPath(); ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * deg, (-90 + v) * deg); ctx.fillStyle = 'rgba(255,255,255,1)'; (); ctx.fill(); // الجزء السفلي الأزرق المركزي ctx.beginPath(); r - 12, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(90,140,220,1)'; ctx. ClosePath(); // رسم النص ctx.strokeText(); الرسم الموحد ctx.draw() },ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.