تأثيرات اتصال الخلفية الديناميكية الشائعة. تم تنظيم الكود أدناه والتعليق عليه من قبل المؤلف على الكود المستخرج، وهو مناسب جدًا للتعلم المرجعي.
لقطة شاشة للتأثير:
عرض التأثير: https://jc1144096387.github.io/canvas_nest/
عنوان المؤلف: https://blog.csdn.net/u013556477/article/details/82819785
كود HTML (رمز الاختبار):
<!doctype html><html lang=en> <head> <meta charset=UTF-8> <meta name=Generator content=EditPlus®> <meta name=Author content=> <meta name=Keywords content=> <meta name=Description content=> <title>تأثيرات اتصال مشهد القماش</title> <style type=text/css>*{ هامش: 0px الحشو: 0px; } body{ لون الخلفية: #f4f4f4; </style></head><body> <!-- <canvas id=c_n9 width=1366 height=403 style=position:fixed top: 0px; ; .6></script></body></html>كود جافا سكريبت:
// تنفيذ الوظيفة على الفور //! يُستخدم لإخبار محرك JavaScript أن هذا تعبير دالة، وليس إعلان دالة، ()،! يمكن لـ , +, - والمشغلين الآخرين تحقيق هذا التأثير، ولكن () هو الأكثر أمانًا // ستؤدي إضافة () بعد !function(){} إلى استدعاء الوظيفة على الفور // يمكن أن يحاكي هذا نطاقًا خاصًا، وبهذه الطريقة، فإن HTML لن يتسبب الملف في حدوث تعارضات متغيرة عند الرجوع إلى ملفات js متعددة function() { // عنصر قماش مرتبط // أنشئ عنصر قماش وقم بتعيين معرف عنصر قماش var Canvas = document.createElement(canvas)، context = Canvas .getContext (2د)، عتر = getAttr(); // قم بتعيين السمات ذات الصلة للوحة القماشية التي تم إنشاؤها Canvas.id = c_n + attr.length; + ;opacity: + attr.opacity; // أضف عنصر اللوحة القماشية إلى عنصر الجسم document.getElementsByTagName(body)[0].appendChild(canvas); // تقوم هذه الوظيفة بتعيين سمة العرض وسمة الارتفاع لعنصر اللوحة القماشية getWindowWH(); // سيحدث حدث تغيير الحجم عند تغيير حجم النافذة أو الإطار // هنا عندما يتغير حجم النافذة، يتم عرض النافذة وارتفاعها تم استعادتها وتعيين عرض وارتفاع عنصر اللوحة window.onresize = getWindowWH; // ستحصل هذه الوظيفة على عنصر البرنامج النصي الذي يشير إلى هذا الملف. // نظرًا لأنه يتم تنفيذ وظيفة getScript مرة واحدة أثناء التعيين في هذا الملف، فعندما يشير ملف html إلى هذا الملف، لم يفسر المتصفح علامة البرنامج النصي بعد هذا الملف. // لذلك في مصفوفة البرنامج النصي التي تم الحصول عليها، يوجد عنصر البرنامج النصي الذي يشير إلى هذه المقالة في نهاية المصفوفة // الغرض من هذه الوظيفة هو تمكين المطورين من تعديل سمات عنصر البرنامج النصي الذي يقدم الملف إلى HTML مباشرة تعديل بعض خصائص اللوحة القماشية ومؤشر z لللوحة القماشية والشفافية وعدد المربعات الصغيرة واللون // تعاون مع الكود السابق لإضافة عنصر اللوحة القماشية إلى عنصر الجسم عندما يريد المطور استخدامه هذا التأثير الخاص كخلفية، فهو يحتاج فقط إلى إضافة عنصر البرنامج النصي إلى ملف html واقتباس وظيفة الملف هذه getAttr() { Let scripts = document.getElementsByTagName(script), len = scripts. length, script = scripts[len - 1]; //v هو العنصر الأخير في البرنامج النصي، والذي يشير إلى عنصر البرنامج النصي في هذا المستند return { length: len, z: script. getAttribute (zIndex) ||.-1، العتامة: script.getAttribute(opacity) ||. 0.5، اللون: script.getAttribute(color) ||. script.getAttribute(count) ||.99 } } // احصل على عرض النافذة وارتفاعها، وقم بتعيين عرض وارتفاع عنصر اللوحة function getWindowWH() { W = Canvas.width = window.innerWidth || document.documentElement.clientWidth | |. document.body .clientWidth, H = Canvas.height = window.innerHeight ||. document.documentElement.clientHeight ||. // إنشاء مربعات صغيرة في مواضع عشوائية var Random = Math.random, Squares = []; // تخزين المربعات الصغيرة // ضع مربعات صغيرة في مصفوفة المربعات [] for (let p = 0; p < attr.count; p++ ) { var Square_x = عشوائي () * W، //abscissa Square_y = عشوائي () * H، // الإحداثيات Square_xa = 2 * عشوائي () - 1، // إزاحة المحور x-1،1 Square_ya = 2 * عشوائي () - 1; // إزاحة المحور Y Squares.push({ x: Square_x, y: Square_y, xa: Square_xa, ya: Square_ya, max: 6000 }) } // إنشاء مربع ماوس صغير var mouse = { x: null, y: null, max: 20000 }; // احصل على إحداثيات الماوس window.onmousemove = function(i) { //i هو W3C DOM, window.event بالنسبة إلى IE DOM، لتحقيق التوافق مع IE // ومع ذلك، يبدو أن IE يدعم حاليًا W3C DOM. يمكنني أيضًا تحقيق تأثيرات تفاعل الماوس من خلال التعليق على السطر التالي من التعليمات البرمجية 7/8/9 غير مدعوم، نعم، لم أختبره // بالطبع من الصحيح إضافة i = i || } // بعد خروج الماوس من النافذة، قم بإزالة المربع الصغير للماوس window.onmouseout = function() { mouse.x = null mouse.y = null } // ارسم مربعًا صغيرًا، يتحرك المربع الصغير (حركة عكسية عند لمس الحدود)، ويرتبط المربع الصغير بالماوس var Animation = window .requestAnimationFrame ||. window .webkitRequestAnimationFrame ||. window.mozRequestAnimationFrame ||. window.oRequestAnimationFrame ||. window.msRequestAnimationFrame ||. 45) }; // يختلف إطار requestAnimation الذي يدعمه كل متصفح، وهو متوافق مع كل متصفح function draw() { // امسح اللوحة القماشية context.clearRect(0, 0, W, H); ].concat (مربعات)؛ // توصيل (دمج) مصفوفة الماوس المربعة الصغيرة والمصفوفات المربعة الصغيرة الأخرى var x, v, A, B, z, y; // جدول السمات المربع: x, y, xa, ya, الأعلى Squares.forEach(function(i) { // تحقيق الحركة الاتجاهية للمربعات الصغيرة ix += i.xa; iy += i.ya; // التحكم في اتجاه حركة المربعات الصغيرة // عندما يصل المربع الصغير إلى النافذة الحدود، تحرك في الاتجاه المعاكس i.xa = i.xa * (ix > W || ix < 0 ? -1 : 1); i.ya = i.ya * (iy > H || iy < 0 ? - 1: 1)؛ // المعلمتان الأوليان لـ fillRect هما إحداثيات x و y للزاوية اليسرى العليا للمستطيل، والمعلمتان الأخيرتان هما العرض والارتفاع على التوالي // ارسم مربعًا صغيرًا context.fillRect(ix - 0.5, iy - 0.5 , 1, 1); // اجتياز جميع العناصر في w for (let n = 0; n < w.length; n++) { x = w[n]; إحداثيات xy لـ x موجودة إذا (i !== x && null !== xx && null !== xy) { x_diff = ix - xx; // الفرق بين إحداثيات x لـ i وx y_diff = iy - xy; // الفرق بين إحداثيات y لـ i وx distance = x_diff * x_diff + y_diff * y_diff; // تربيع الوتر if (distance < x.max) { // اجعل المربع الصغير i مرتبطًا بالمربع الصغير للماوس، أي إذا كانت المسافة بين المربع الصغير i والمربع الصغير للماوس كبيرة جدًا، فسيتم ربط المربع الصغير i بالمربع الصغير للماوس، // مما يؤدي إلى مربعات صغيرة متعددة يكون الماوس في المركز، mouse.max /2 هو نصف القطر الذي يتم تكوينه لدائرة if (x === mouse && distance > x.max / 2) { ix = ix - 0.03 * x_diff; iy = iy - 0.03 * y_diff } أ = (x.max - distance) / x.max; context.beginPath(); // اضبط سمك خط الفرشاة ليكون مرتبطًا بالمسافة بين المربعين الصغيرين، والتي تتراوح من 0 إلى 0.5. كلما كان الخط أرق، يصل إلى الحد الأقصى، يختفي الخط عند رسم الخط context.lineWidth = A / 2; // اضبط لون خط الفرشاة على sc، وهو لون القماش، والشفافية على (A+0.2) أي أنه كلما كان المربعان الصغيران أبعد، كان الخط أفتح. context.strokeStyle = rgba ( + attr.color + , + (A + 0.2) + ); // اضبط حد الفرشاة على المربع الصغير i context.moveTo(ix, iy); // انقل حد الفرشاة إلى المربع الصغير x context.lineTo(xx , xy); // أكمل رسم الخط، أي رسم الخط الذي يربط المربعات الصغيرة context.stroke(); } } } // قم بإزالة المربع الصغير i من المصفوفة w // منع مربعين صغيرين من الاتصال بشكل متكرر w.splice(w.indexOf(i), 1)); //window.requestAnimationFrame يشبه setTimeout، ويشكل مكالمة متكررة ، // ومع ذلك، يستخدم window.requestAnimationFrame الفاصل الزمني للنظام للحفاظ على أفضل كفاءة في الرسم، ويوفر تحسينًا أفضل لجعل الرسوم المتحركة أكثر سلاسة // بعد تحسين المتصفح، تصبح الرسوم المتحركة أكثر سلاسة؛ // عندما لا يتم تنشيط النافذة، ستتوقف الرسوم المتحركة لحفظ موارد الحوسبة؛ Animation(draw); } // هنا، بعد الانتظار لمدة 0.1 ثانية، يتم تنفيذ تأثير الرسوم المتحركة الحقيقي بواسطة window .requestAnimationFrame function() { draw() }, 100)} ();عنوان كود المصدر: https://github.com/jc1144096387/canvas_nest
تلخيصما ورد أعلاه هو رمز تحليل قماش html5 لتحقيق التأثيرات الديناميكية لاتصال الماوس في الخلفية التي قدمها المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب . أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!
إذا كنت تعتقد أن هذه المقالة مفيدة لك، فنحن نرحب بإعادة طبعها، يرجى الإشارة إلى المصدر، شكرًا لك!