Method for realizing meteor shower using HTML

Xiaobian to share the way using HTML to achieve meteor shower, I hope everyone will read the big harvest after this article, let us discuss together!

  Meteor shower     body {margin: 0; Overflow: hidden; }    The book of the canvas pictureboard paintings ->    // Document // Document Current Document // getElement Get a tag / / Byid's way // var declaration with the ID name // VAR CANVAS declares a space name called canvasvar canvas = document.getlementByid ("canvas"); // Get drawboard permission context VAR CTX = canvas.getContext ("2D "); // allows the size of the discipline equal to the size of the screen / * Idea: 1. Get the screen object 2. Get the size of the screen 3. The size assignment of the screen gives the pictureboard * /// Get the screen object var s = window.screen; / / Get the width and height of the screen, VAR W = S.Width; VAR H = S.HEight; // Set the size of the drawboard canvas.Width = W; canvas.Height = h; // Set the text size var fontsize = 14; // Calculate oneHow many words are tetched down to take a detained var clos = math.floor (w / fontsize); // Think about the coordinates of each word // Create an array to put the Clos 0 (Y coordinate storage) var DROPS = [] Var str = "qWERTYUIOPASDFGHJKLZXCVBNM"; // Add a CLOS 0for (VAR i = 0; I  h && math.random ()> 0.99) {DROPS [i] = 0;} DROPS [i] ++ }} // Define a timer, execute setInterval (DrawString, 30) every 30 milliseconds;  <!--
			     After reading this article, I believe that you have a certain understanding of the method of realizing meteor shower using HTML. I want to know more about the knowledge. Welcome to Tumi Yun Industry Information Channel, thank you for reading! <clos;i++) {
				drops.push(0);
			}
 
			//绘制文字
			function drawString() {
				//给矩形设置填充色
				ctx.fillStyle="rgba(0,0,0,0.05)"
				//绘制一个矩形
				ctx.fillRect(0,0,w,h);
 
				//添加文字样式
				ctx.font = "600 "+fontSize+"px 微软雅黑";
				//设置文字颜色
				ctx.fillStyle = "#ff2d2d";
 
				for(var i = 0;i                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment