HTMLcanvas rectangular shower and htmlcanvas rectangular shower

HTMLcanvas rectangular shower and htmlcanvas rectangular shower

HTMLcanvas rectangular shower

• Execute on the canvas
• Obtain the drawing environment
• Full Screen acquisition of screen width and screen height
• Determine the width of each text to determine the column
• Loop output
• Timer call

HTML section

<! Doctype html> 
CSS Section
<Style type = "text/css">/* Basic reset */* {margin: 0; padding: 0 ;} /* give the body a background to make the canvas clearer */body {background-color: #000 ;}canvas {display: block ;}</style>
Javascript Section
<Script type = "text/jscript"> var c = document. getElementById ("c"); // obtain the id var ctx = c. getContext ("2d"); // 2d drawing c. width = window. innerWidth; // obtain the screen width c. height = window. innerHeight; // obtain the screen height var chinese = "abcdefghijklmnopqrstuvwxyz"; // canvas shower text chinese = chinese. split (""); // split separation var font_size = 10; // font size 10px var columns = c. width/font_size; // obtain the screen width of the column/font size var drops = []; // drop the new array for (n = 0; n <columns; n ++) // control column output drops [n] = 1; // draw function draw () {ctx. fillStyle = "rgba (0.05, 0,)"; // draw a rectangle ctx. fillRect (0, 0, c. width, c. height); // draw a rectangle ctx using the coordinates of (0, 0. fillStyle = "#0F0"; // green text ctx. font = font_size + "px arial"; // in pixels, for (var I = 0; I <drops. length; I ++) {var text = chinese [Math. floor (Math. random () * chinese. length)]; // Math. floor rounded down ctx to the floating point number. fillText (text, I * font_size, drops [I] * font_size ); // specify that the text output on the canvas starts to draw the x coordinate y coordinate of the text if (drops [I] * font_size> c. height & Math. random ()> 0.975) // If the dropped text is greater than the screen height or the random number is greater than 0.975 drops [I] = 0; // reset the dropped drops [I] ++; // continue execution} setInterval (draw, 33); // 33 execute draw () Once </script>
This article ends here
 
 
I always believe that this world is full of good and hope. Come on!