Aujourd'hui, l'éditeur partagera avec vous le treizième numéro de la série de collections d'effets spéciaux front-end Web. Amis qui aiment jouer avec des effets sympas, jetez-y un œil ^_^ J'espère que vous l'aimerez tous ~.
Permettez-moi de partager avec vous un effet de texte en cascade formé à l'aide d'un canevas HTML5, ce qui est très cool ! Le code correspondant est le suivant :
<!doctype html><html lang=fr><head> <meta charset=UTF-8> <title>tissu</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) ;//Rendre le plein écran c.height = window.innerHeight;c.width = window.innerWidth;//Caractères chinois du jeu de caractères Unicode var chinois = igeekbar~;//Convertir la chaîne en un seul caractère dans un tableau chinois = chinois.split();var font_size = 20;var columns = c.width/font_size; //Le nombre de colonnes sous rain//Le nombre de colonnes dans chaque colonne, un tableau var drops = []; // Ci-dessous se trouvent les coordonnées x // 1 = y en gouttes (idem initialement) for(var x = 0; x < columns; x++) drops[x] = 1 ; //Fonction de dessin draw(){ //Toile BG noire // Piste d'affichage BG semi-transparente ctx.fillStyle = rgba(0, 0, 0, ctx.fillRect(0, 0, c.width, c. hauteur); ctx.fillStyle = #0F0; //Couleur de police ctx.font = font_size + px arial; //Police de boucle pour (var i = 0; i < drops.length; i++) { //Imprimer des caractères chinois aléatoires var text = Chinese[Math.floor(Math.random()*chinese.length)]; //x = i*font_size, y = valeur de drops[i] * font_size ctx.fillText(text, i*font_size, drops[i]*font_size); //Après avoir tracé une ligne sur l'écran, envoyez-la aléatoirement vers le haut //Ajoutez un caractère aléatoire à la réinitialisation pour que les gouttes soient dispersées sur l'axe if(drops[i]*font_size > c.height && Math. random( ) > 0,975) drops[i] = 0; //Augmentation de la coordonnée Y drops[i]++; }}setInterval(draw, 33);</script></body></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.