canvas entry-level basic usage of raindrops falling achieve special effects

canvas basic knowledge referring to documentation, directly on the code, very detailed notes

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvas雨滴特效</title>
        <style>
            body{
                margin: 0;
                overflow: hidden;
            }
            #rain{
                display: block;
                background-color: #000;
            }
        </ Style > 
    </ head > 
    < body > 
        < canvas ID = "Rain" > </ canvas > 

        < Script > 
            // Get the canvas element 
            const canvas = document.querySelector ( ' #rain ' );
             // Set the canvas element width high function 
            var wX, wY;
             ~ ~ function setSize () {
                 // called automatically when the monitor window function setSize changes 
                window.onresize = the arguments.callee;
                 //Get the width and height of the browser window 
                wX = window.innerWidth; 
                wY = window.innerHeight;
                 // to set the width and height canvas 
                canvas.width = wX; 
                canvas.height = wY; 
            } (); 
            // Get drawing area (corresponding to the brush , can be anywhere in the canvas graphics rendering) 
            var CTX = canvas.getContext ( ' 2D ' ); 

            // random number generates a random number between two 
            function random (min, max) {
                 return Math.random () * (max - min) + min;
            } 
            // generated raindrops constructor 
            function Rain () {};
             // add prototyping 
            Rain.prototype = { 
                the init: function () {
                     the this .x = Random ( 0 , wX); // raindrop abscissa 
                    the this .y =  0 ; // raindrops ordinate default falling from the top of 
                    the this .v = Random ( . 3 , . 4 ); // raindrop falling speed per 
                    the this .h = Random ( 0.9 * wY, wY);// drop to window 90 to 100% of the height of 
                    the this .r =  . 1 ; // raindrops blooming initial radius of 
                    the this .vr =  0.4 ; // radial expansion speed 
                }, 
                Draw: function () {
                     IF ( the this .y < the this .h) { // determines whether% ~ 100% between 90 
                        ctx.beginPath ();                     // penup paint 
                        ctx.fillStyle =  ' # 666 ' ;              // SUMMARY solid fill color
                        ctx.fillRect ( the this .x, the this .y, . 4 , . 8 );     // draw a rectangle small raindrops 
                    } the else { // do not fall into the following sections is to bloom into circularly 
                        ctx.beginPath (); 
                        ctx.strokeStyle =  ' # 666 ' ; 
                        ctx.arc ( the this .x, the this .y, the this .r, 0 , Math.PI * 2 ); 
                        ctx.stroke (); 
                    } 
                }, 
                Move:function () {
                     IF ( the this .y < the this .h) { // drop 
                        the this .y + = the this .v; // drop 3-4 drops per second from 
                    } the else { // bloom into circularly 
                        IF ( the this . R & lt < 35 ) {
                             the this .r + = the this .vr; 
                        } the else {
                             the this .init ();  
                        }
                    } 
                    the this .draw (); // move raindrops drawn 
                } 
            } 

            // generated animation to be added for the convenience of raindrops found present in the array 
            var Arain = [];
             // create function raindrops 
            function createRain (NUM) {
                 for ( var I = 0 ; I < NUM; I ++ ) { 
                    the setTimeout ( function () { // every 200 ms to generate a 
                        var Rain =  new new Rain (); 
                        rain.init ();
                        rain.draw (); 
                        aRain.push (Rain); 
                    }, 200 is *I) 
                } 
            } 
            createRain ( 50 ); 

            // timer Videos animation frame forming 
            the setInterval ( function () {
                 // ctx.clearRect (0,0, wX, wY); // erase a pattern (snowy feel) 
                // this effect is not erased raindrop Jiameng Version achieve gradients 
                ctx.fillStyle =  ' RGBA (0,0,0,0.05) ' ; 
                ctx.fillRect ( 0 , 0 , wX, wY);
                 for ( varArain of Item) { 
                    item.move (); 
                } 
            }, 1000 /144); // refresh rate (here, 144 Hz) based on their screen 
            
        </ Script > 
    </ body > 
</ HTML >
My original content, inadequate please forgive me! Please correct me! Please indicate the source attach a link, thank you!
canvas entry-level basic usage of raindrops falling achieve special effects

canvas basic knowledge referring to documentation, directly on the code, very detailed notes

Guess you like
