How to use canvas Digital Rain to achieve effect

This article mainly introduces how to use canvas digital rain to achieve the effect of related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to achieve the effect of canvas digital rain will have a harvest, let's take a look at it.

Code:

Document body {margin: 0; padding: 0;} canvas {width: 100%; height: 100%;} / get canvas object var can = document.querySelector ("canvas"); / / get canvas context var ctx = can.getContext ("2d") / / set the width and height of canvas can.width = window.innerWidth; can.height = window.innerHeight; / / the font size of each text var fontSize = 16; / / calculate the column var colunms = Math.floor (window.innerWidth / fontSize); / / record the y-axis coordinates of each column of text var arr = [] / / initialize the location of a starting point for each text for (var I = 0; I

< colunms; i++) { arr.push(0); } //运动的文字 var str = "you are a silly"; //绘画的函数 function draw() { //布满全屏的黑色遮罩层 ctx.fillStyle = "rgba(0,0,0,0.05)"; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); //给字体设置样式 ctx.font = "700 " + fontSize + "px 微软雅黑"; //给字体添加颜色 ctx.fillStyle = "#00cc33"; //写入画布中 for (var i = 0; i < colunms; i++) { var index = Math.floor(Math.random() * str.length); var x = i * fontSize; var y = arr[i] * fontSize; ctx.fillText(str[index], x, y); //如果文字的Y轴坐标大于画布的高度，1/100*colunms概率将该文字的Y轴坐标重置为0 if (y >

= can.height & & Math.random () > 0.99) {arr [I] = 0;} / text Y axis coordinates + 1 arr [I] +;}} draw (); setInterval (draw, 30); this is the end of the article on "how to achieve the effect with canvas Digital Rain". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve the effect with canvas digital rain". If you want to learn more knowledge, you are welcome to follow the industry information channel.