اليوم، سيشارككم المحرر الإصدار الثالث عشر من سلسلة مجموعة المؤثرات الخاصة للواجهة الأمامية للويب، أيها الأصدقاء الذين يحبون اللعب بالمؤثرات الرائعة، يرجى إلقاء نظرة ^_^، أتمنى أن تنال إعجابكم جميعًا ~
اسمحوا لي أن أشارككم تأثير نص تدفق الشلال الذي تم تشكيله باستخدام قماش HTML5، وهو رائع جدًا! الكود ذو الصلة هو كما يلي:
<!doctype html><html lang=en><head> <meta charset=UTF-8> <title>cloth</title> <style> *{ padding: 0;}body{ الخلفية:#000 ;} </style></head><body> <div id=container> <canvas id=c></canvas></div><script type=text/javascript src=http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js></script><script> var c = document.getElementById(c);var ctx = c.getContext(2d) ;// جعل ملء الشاشة c.height = window.innerHeight;c.width = window.innerWidth;// الأحرف الصينية من مجموعة أحرف Unicode var chinese = igeekbar~;// تحويل السلسلة إلى حرف واحد في مصفوفة chinese = chinese.split();var Font_size = 20;var columns = c.width/font_size; // عدد الأعمدة في المطر// الرقم من الأعمدة في كل عمود مصفوفة var Drops = []; // فيما يلي إحداثيات x // 1 = y في القطرات (نفس الشيء في البداية) for(var x = 0; x < columns; x++) drop[x] = 1 ; // رسم وظيفة draw(){ // قماش BG أسود // مسار عرض BG شبه شفاف ctx.fillStyle = rgba(0, 0, 0, ctx.fillRect(0, 0, c.width, c. height); ctx.fillStyle = #0F0; // لون الخط ctx.font = Font_size + px arial; drop.length; i++) { // طباعة أحرف صينية عشوائية var text = chinese[Math.floor(Math.random()*chinese. length)]; * حجم الخط ctx.fillText(text, i*font_size,drops[i]*font_size); // بعد رسم خط على الشاشة، أرسله عشوائيًا إلى الأعلى // أضف عشوائيًا إلى إعادة الضبط بحيث تتناثر القطرات عبر المحور if(drops[i]*font_size > c.height && Math. Random( ) > 0.975) drop[i] = 0; // زيادة الإحداثي Y drop[i]++; }}setInterval(draw, 33);</script></body></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.