前端开发canvas雨滴

前端开发难还是后台难
前端开发的后台交互原理
前端后台的开发

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            canvas {
                display: block;
                background: #000;
            }
        </style>
    </head>
    <body>
        <canvas id=”cvs”> </canvas>
        <script type=”text/javascript”>
            var cvs = document.getElementById(‘cvs’)
            var ctx = cvs.getContext(‘2d’)
            var w = window.innerWidth
            var h = window.innerHeight
            cvs.width = w
            cvs.height = h
            function randomNum(min, max) {
                return Math.random() * (max – min) + min
            }
            function Drop() {}
            Drop.prototype = {
                init: function() {
                    this.x = randomNum(0, w)
                    this.y = 0
                    this.r = 0
                    this.vy = randomNum(2, 5)
                    this.vr = 1
                    this.l = randomNum(0.8 * h, 0.9 * h)
                    this.a = 1
                    this.va = 0.96
                },
                drow: function() {
                    if (this.y < this.l) {
                        ctx.fillStyle = ‘#33ffff’
                        ctx.fillRect(this.x, this.y, 2, 10)
                    } else {
                        ctx.beginPath()
                        ctx.strokeStyle = ‘rgba(0,255,255,’ + this.a + ‘)’
                        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
                        ctx.stroke()
                    }
                    this.update()
                },
                update: function() {
                    if (this.y < this.l) {
                        this.y += this.vy
                    } else {
                        if (this.a > 0.03) {
                            this.r += this.vr
                            if (this.r > 50) {
                                this.a *= this.va
                            }
                        } else {
                            this.init()
                        }
                    }
                },
            }
            var drops = []
            for (var i = 0; i < 30; i++) {
                setTimeout(function() {
                    var drop = new Drop()
                    drop.init()
                    drops.push(drop)
                }, 200 * i)
            }
            setInterval(function() {
                ctx.fillStyle = ‘rgba(0,0,0,0.07)’
                ctx.fillRect(0, 0, w, h)
                for (var i = 0; i < drops.length; i++) {
                    drops[i].drow()
                }
            }, 16)
        </script>
    </body>
</html>
前端开发与后台开发
后台开发前端开发测试开发
后台管理前端开发
» 本文来自:前端开发者 » 《前端开发canvas雨滴》
» 本文链接地址:https://www.rokub.com/8056.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!