Heute wird der Herausgeber die dreizehnte Ausgabe der Web-Frontend-Spezialeffekt-Sammlungsreihe mit Ihnen teilen. Freunde, die gerne mit coolen Effekten spielen, schauen Sie sich bitte um ^_^ Ich hoffe, sie gefällt euch allen
Lassen Sie mich einen Wasserfall-Texteffekt vorstellen, der mit HTML5-Canvas erstellt wurde, was sehr cool ist! Der entsprechende Code lautet wie folgt:
<!doctype html><html lang=en><head> <meta charset=UTF-8> <title>cloth</title> <style> *{ padding: 0; margin: 0;}body{ background:#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) ;//Vollbild erstellen c.height = window.innerHeight;c.width = window.innerWidth;//Chinesische Zeichen aus dem Unicode-Zeichensatz var chinese = igeekbar~;/Konvertieren Sie die Zeichenfolge in ein einzelnes Zeichen in einem Array. chinese = chinese.split();var font_size = 20;var columns = c.width/font_size; //Die Anzahl der Spalten in rain//Die Zahl Anzahl der Spalten in jeder Spalte eines Arrays vardrops = []; // Unten sind die x-Koordinaten // 1 = y in Drops (anfangs gleich) for(var x = 0; x < columns; x++)drops[x] = 1 ; //Zeichnungsfunktion draw(){ //Schwarzer Hintergrundhintergrund // Halbtransparenter Hintergrundhintergrund ctx.fillStyle = rgba(0, 0, 0, 0.05); height); ctx.fillStyle = #0F0; //Schriftfarbe ctx.font = font_size + px arial; //Loop-Schriftart for(var i = 0; i < drops.length;i++) { //Zufällige chinesische Zeichen drucken var text = chinese[Math.floor(Math.random()*chinese.length)] //x = i*font_size, y = value ofdrops[i] * font_size ctx.fillText(text, i*font_size,drops[i]*font_size); // Nachdem Sie eine Linie auf dem Bildschirm gezeichnet haben, senden Sie sie zufällig nach oben // Fügen Sie dem Zurücksetzen eine Zufälligkeit hinzu, sodass die Tropfen über die Achse verteilt werden if(drops[i]*font_size > c.height && Math. random( ) > 0,975)drops[i] = 0; //Erhöhte Y-Koordinatedrops[i]++;Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.