Hoy, el editor compartirá con ustedes el decimotercer número de la serie de colecciones de efectos especiales de front-end web. Amigos a quienes les gusta jugar con efectos geniales, eche un vistazo ^_^ Espero que les guste a todos.
Permítanme compartir con ustedes un efecto de texto de flujo en cascada formado con un lienzo HTML5, ¡que es genial! El código relevante es el siguiente:
<!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) ;//Hacer pantalla completa c.height = window.innerHeight;c.width = window.innerWidth;//Caracteres chinos del conjunto de caracteres Unicode var chino = igeekbar~;//Convierte la cadena a un solo carácter en una matriz Chinese = Chinese.split();var font_size = 20;var columns = c.width/font_size; //El número de columnas en lluvia//El número de columnas en cada columna una matriz var gotas = [] // A continuación se muestran las coordenadas x // 1 = y en gotas (igual inicialmente) for(var x = 0; x < columnas; x++) gotas[x] = 1 ; // Función de dibujo draw(){ // Lienzo BG negro // Pista de visualización BG semitransparente ctx.fillStyle = rgba(0, 0, 0, ctx.fillRect(0, 0, c.width, c. altura); ctx.fillStyle = #0F0; //Color de fuente ctx.font = font_size + px arial; gotas.length; i++) { //Imprimir caracteres chinos aleatorios var text = chino[Math.floor(Math.random()*chinese.length)] //x = i*font_size, y = valor de gotas[i] * tamaño_fuente ctx.fillText(texto, i*tamaño_fuente, gotas[i]*tamaño_fuente); //Después de dibujar una línea en la pantalla, envíala aleatoriamente a la parte superior //Agrega aleatoriedad al reinicio para que las gotas se dispersen a lo largo del eje if(drops[i]*font_size > c.height && Math. random( ) > 0.975) gotas[i] = 0; //Aumento de la coordenada Y gotas[i]++; }}setInterval(draw, 33);</script></body></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.