JavaScript canvas to achieve raindrop effect

This article example shares the specific code for JavaScript canvas to achieve raindrop effects for your reference. The specific content is as follows

See the effect first

It looks very cool, but it actually realizes the falling of raindrops and the final circle.

Or look at the source code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        // Get the canvas var canvas = document.querySelector('canvas')
        // Get the brush var ctx = canvas.getContext('2d')
        // Cannot change canvas size using CSS var ch = canvas.height = window.innerHeight
        var cw = canvas.width = window.innerWidth
        // Release raindrops var arrRain = []
        // Monitor the screen size, and change the size of the canvas accordingly window.onresize = function () {
            ch = canvas.height = window.innerHeight
            cw = canvas.width = window.innerWidth
        }
        // Get a random number in order to generate random raindrops function randow(min, max) {
            return Math.random() * (max - min) + min
        }
        // Constructor function Rain() {

        }
        // Add properties and methods to rain Rain.prototype = {
            // Initialize the position and radius of the circle where the raindrops fall init: function () {
                this.x = randow(0, cw)
                this.y = 0
                // The distance that the raindrops finally land on the ground cannot exceed the screen this.h = randow(0.8 * ch, 0.9 * ch)
                this.r = 1 // Starting radius of the circle this.vr = 1 // Speed at which the radius grows this.vy = randow(4, 5)

            },
            // Drawing method draw: function () {
                // When it is less than h, draw raindrops and rectangles if (this.y < this.h) {
                    ctx.beginPath()
                    ctx.fillStyle = 'white'
                    ctx.fillRect(this.x, this.y, 4, 10)
                } else {
                    // Draw a circle ctx.beginPath()
                    ctx.strokeStyle = 'white'
                    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
                    ctx.stroke()
                }
            },
            //Raindrop movement move: function () {
                // When it is less than h, add y to make the raindrops move if (this.y < this.h) {
                    this.y += this.vy
                } else {
                    // Achieve the effect of splashing water if (this.r < 70) {
                        this.r += this.vr
                    } else {
                        // Initialize after the effect ends and generate raindrops from the sky, so call the init function this.init()
                    }
                }
                this.draw()
            }
        }
        // Generate raindrops function createRain(num) {
            for (var i = 0; i < num; i++) {
                // Generate raindrops randomly, not simultaneously setTimeout(function () {
                    var rain = new Rain()
                    rain.init()
                    rain.draw()
                    arrRain.push(rain)
                }, 300 * i)
            }
        }
        createRain(60)
        setInterval(function () {
            ctx.beginPath()
            ctx.fillStyle = 'rgba(0,0,0,0.05)'
            ctx.fillRect(0, 0, cw, ch)
            for (var k of arrRain) {
                k.move()
            }
        }, 1000 / 80)
    </script>
</body>

</html>

These are the source codes implemented by Raindrops, for reference only.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: