How to realize the effect of meteor shower with html
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!
