javascript canvas 빗방울 효과 구현

4339 단어 jscanvas빗방울
본 논문 의 사례 는 자바 script canvas 가 빗방울 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과

시 크 해 보이 지만 빗방울 이 떨 어 지고 마지막 원 이 있 습 니 다.
소스 코드

<!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>
        //     
        var canvas = document.querySelector('canvas')
        //     
        var ctx = canvas.getContext('2d')
        //    css      
        var ch = canvas.height = window.innerHeight
        var cw = canvas.width = window.innerWidth
        //    
        var arrRain = []
        //       ,                
        window.onresize = function () {
            ch = canvas.height = window.innerHeight
            cw = canvas.width = window.innerWidth
        }
        //        ,           
        function randow(min, max) {
            return Math.random() * (max - min) + min
        }
        //     
        function Rain() {

        }
        //  rain       
        Rain.prototype = {
            //                
            init: function () {
                this.x = randow(0, cw)
                this.y = 0
                //                
                this.h = randow(0.8 * ch, 0.9 * ch)
                this.r = 1 //       
                this.vr = 1 //        
                this.vy = randow(4, 5)

            },
            //    
            draw: function () {
                //   h   ,   ,   
                if (this.y < this.h) {
                    ctx.beginPath()
                    ctx.fillStyle = 'white'
                    ctx.fillRect(this.x, this.y, 4, 10)
                } else {
                    //   
                    ctx.beginPath()
                    ctx.strokeStyle = 'white'
                    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
                    ctx.stroke()
                }
            },
            //     
            move: function () {
                //   h , y      
                if (this.y < this.h) {
                    this.y += this.vy
                } else {
                    //          
                    if (this.r < 70) {
                        this.r += this.vr
                    } else {
                        //          ,        ,     init  
                        this.init()
                    }
                }
                this.draw()
            }
        }
        //     
        function createRain(num) {
            for (var i = 0; i < num; i++) {
                //       ,      
                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>
이것 이 바로 빗방울 이 실현 되 는 소스 코드 이 니 참고 하 시기 바 랍 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기