Today, the editor will share with you the thirteenth issue of the web front-end special effects collection series. Friends who like to play with cool effects, please take a look ^_^. I hope you all like it~
Let me share with you a waterfall flow text effect formed using HTML5 canvas, which is very cool! The relevant code is as follows:
<!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) ;//Make full screen c.height = window.innerHeight;c.width = window.innerWidth;//Chinese characters from Unicode character set var chinese = igeekbar~;//Convert the string to a single character in an array chinese = chinese.split();var font_size = 20;var columns = c.width/font_size; //The number of columns in rain//The number of columns in each column an array var drops = []; // Below are the x coordinates // 1 = y in drops (same initially) for(var x = 0; x < columns; x++) drops[x] = 1; //Draw function draw(){ //Black BG canvas // Semi-transparent BG display track ctx.fillStyle = rgba(0, 0, 0, 0.05); ctx.fillRect(0, 0, c.width, c. height); ctx.fillStyle = #0F0; //Font color ctx.font = font_size + px arial; //Loop font for(var i = 0; i < drops.length; i++) { //Print random Chinese characters 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); //After drawing a line on the screen, send it random to the top //Add a randomness to the reset so that the drops are scattered across the axis if(drops[i]*font_size > c.height && Math. random() > 0.975) drops[i] = 0; //Increased Y coordinate drops[i]++; }}setInterval(draw, 33);</script></body></html>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.