Cet article vous présente principalement les informations pertinentes sur l'exemple de code de l'effet de texte de flux de cascade de canevas HTML5. L'éditeur pense qu'il est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
J'aimerais partager avec vous un effet de texte en cascade formé à l'aide d'un canevas HTML5, c'est très cool ! Le code pertinent est le suivant :
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cloth</title> <style> *{ padding: 0; margin: 0; } body{ background:#000; } </style> </head> <body> <p id="container"> <canvas id="c"></canvas> </p> <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 = []; //下面是×坐标 //1 = y 在下降(最初是相同的) for(var x = 0; x < columns; x++) drops[x] = 1; //画 function draw() { //黑BG的帆布 //半透明BG显示轨迹 ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, c.width, c.height); ctx.fillStyle = "#0F0"; //字体颜色 ctx.font = font_size + "px arial"; //循环字体 for(var i = 0; i < drops.length; i++) { //随机汉字打印 var text = chinese[Math.floor(Math.random()*chinese.length)]; //x = i*font_size, y = value of drops[i]*font_size ctx.fillText(text, i*font_size, drops[i]*font_size); //在屏幕上划线后,把它的顶部随机发送到顶部 //将一个随机性添加到复位中,使分散在轴上的下降 if(drops[i]*font_size > c.height && Math.random() > 0.975) drops[i] = 0; //增加的Y坐标 drops[i]++; } } setInterval(draw, 33); </script> </body> </html>
Recommandations associées :
Méthode de mise en œuvre de la disposition des flux en cascade super simple
JQuery implémente simplement le flux de cascade d'images
Explication détaillée de l'utilisation du plug-in de flux de cascade JS natif pur Macy.js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!