Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use html to achieve the effect of meteor shower, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Meteor shower

Body {

Margin:0

Overflow:hidden

}

/ / get the artboard

/ / doccument current document

/ / getElement gets a tag

/ / ById through the Id name

/ / var declares a piece of space

/ / varcanvas declares that the name of a space is canvas

Varcanvas=document.getElementById ("canvas")

/ / get the context of artboard permissions

Varctx=canvas.getContext ("2d")

/ / make the size of the drawing board equal to the size of the screen

/ *

Train of thought:

1. Get screen object

two。 Get the size of the screen

3. The size of the screen is assigned to the drawing board

* /

/ / get the screen object

Vars=window.screen

/ / get the width and height of the screen

Varw=s.width

Varh=s.height

/ / set the size of the artboard

Canvas.width=w

Canvas.height=h

/ / set text size

VarfontSize=14

/ / calculate how many words on a line are rounded down as integers

Varclos=Math.floor (w/fontSize)

/ / think about the coordinates of each word

/ / create an array to store clos zeros (y coordinates)

Vardrops= []

Varstr= "qwertyuiopasdfghjklzxcvbnm"

/ / add clos zeros to the array

For (vari=0;i0.99) {

Drops [I] = 0

}

Drops [I] + +

}

}

/ / define a timer to be executed every 30 milliseconds

SetInterval (drawString,30)

The above is all the content of this article "how to use html to achieve the effect of meteor shower". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.