How to use JS to realize Code Rain Special effect
The knowledge of this article "how to use JS to achieve code rain special effects" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use JS to achieve code rain special effects" article.
Html code
Js code
_ window.onload = function () {/ / get canvas object var canvas = document.getElementById ("code_rain_canvas"); / / get canvas context var context = canvas.getContext ("2d"); var s = window.screen; var W = canvas.width = s.width; var H = canvas.height / / get the width and height of the browser screen / / var W = window.innerWidth; / / var H = window.innerHeight; / / set the width and height of canvas canvas.width = W; canvas.height = H; / / the font size of each text var fontSize = 12 / / calculate the column var colunms = Math.floor (W / fontSize); / / record the y-axis coordinates of each column of text var drops = []; / / initialize the position of a starting point for each text for (var I = 0; I)
< colunms; i++) { drops.push(0); } //运动的文字 var str = "WELCOME TO WWW.ITRHX.COM"; //4:fillText(str,x,y);原理就是去更改y的坐标位置 //绘画的函数 function draw() { context.fillStyle = "rgba(238,238,238,.08)"; //遮盖层 context.fillRect(0, 0, W, H); //给字体设置样式 context.font = "600 " + fontSize + "px Georgia"; //给字体添加颜色 context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)]; //randColor();可以rgb,hsl, 标准色，十六进制颜色 //写入画布中 for (var i = 0; i < colunms; i++) { var index = Math.floor(Math.random() * str.length); var x = i * fontSize; var y = drops[i] * fontSize; context.fillText(str[index], x, y); //如果要改变时间，肯定就是改变每次他的起点 if (y >= canvas.height & & Math.random () > 0.99) {drops [I] = 0;} drops [I] +;}}; function randColor () {/ / Random color var r = Math.floor (Math.random () * 256) Var g = Math.floor (Math.random () * 256); var b = Math.floor (Math.random () * 256); return "rgb (" + r + "," + g + "," + b + ")";} draw (); setInterval (draw, 35);}
Display effect:
The above is about "how to use JS to achieve code rain special effects" of this article, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge, please pay attention to the industry information channel.
