找回密码
当前位置：前端开发者 > HTML > 正文

canvas 实现火雨效果

2018-11-22 23:10:20 分类：HTML 阅读(99) 评论(0)
想做前端开发需要会什么软件
ui前端开发是做什么的
前端开发都可以做什么
前端开发使用什么电脑配置
前端开发会遇到什么坑
前端开发基础班学什么区别

本想做成火球形的，结果变成了火砖形。

 

 


代码：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Fire</title>
        <style>
            html,
            body,
            canvas {
                width: 100vw;
                height: 100vh;
                background: rgb(0, 0, 0);
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <canvas></canvas>
        <script>
            window.onload = function() {
                var width = window.innerWidth
                var height = window.innerHeight
                var canvas = document.querySelector('canvas')
                canvas.width = width
                canvas.height = height
                var ctx = canvas.getContext('2d')
                ctx.globalCompositeOperation = 'lighter'
                var fires = new Set()
                var count = 0
                function randomNUM(min, max) {
                    return Math.floor(Math.random() * (max - min) + min)
                }
                function F() {}
                F.prototype.initState = function(x, y) {
                    this.x = x
                    this.y = y
                    this.vx = (Math.random() - 0.5) * 2
                    this.vy = (Math.random() - 1.5) * 4
                    this.opacity = 1
                    this.radius = 20
                    this.g = 0
                }
                F.prototype.render = function(x, y) {
                    this.x += this.vx
                    this.y += this.vy
                    this.radius -= 1
                    this.opacity -= 0.05
                    this.g += 10
                    this.draw()
                    if (
                        this.opacity <= 0 ||
                        this.radius <= 0 ||
                        this.g >= 255
                    ) {
                        this.initState(x, y)
                    }
                }
                F.prototype.draw = function() {
                    var radgrad = ctx.createRadialGradient(
                        this.x,
                        this.y,
                        this.radius / 2,
                        this.x,
                        this.y * 2,
                        this.radius,
                    )
                    radgrad.addColorStop(
                        0,
                        'rgba(255,' + this.g + ',0,' + this.opacity + ')',
                    )
                    radgrad.addColorStop(0.5, 'rgb(255,0,0)')
                    radgrad.addColorStop(1, 'rgb(255,0,0)')
                    ctx.fillStyle = radgrad
                    ctx.beginPath()
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
                    ctx.closePath()
                    ctx.fill()
                }
                function Fire() {
                    this.x = randomNUM(width / 3, (width / 5) * 6)
                    this.y = 0
                    this.speedX = randomNUM(4, 12)
                    this.speedY = this.speedX
                    this.fire = new Set()
                    this.isOver = false
                }
                Fire.prototype.makeFire = function() {
                    if (!this.isOver) {
                        var f = new F()
                        f.initState(this.x, this.y)
                        this.fire.add(f)
                        this.x -= this.speedX
                        this.y += this.speedY
                        this.speedX += 0.1
                        this.speedY += 0.1
                        if (this.y >= height + 200) this.isOver = true
                    }
                }
                function run() {
                    if (count < 10) {
                        fires.add(new Fire())
                        count += 1
                    }
                    fires.forEach(function(fe) {
                        fe.makeFire()
                        fe.fire.forEach(function(f) {
                            f.render(fe.x, fe.y)
                        })
                        if (fe.isOver) {
                            fires.delete(fe)
                            fires.add(new Fire())
                        }
                    })
                }
                ;(function animate() {
                    ctx.clearRect(0, 0, width, height)
                    run()
                    requestAnimationFrame(animate)
                })()
            }
        </script>
    </body>
</html>
前端后端和开发有什么区别
前端开发后端开发分别是什么
什么是前端开发h5
前端开发移动端注意什么
前端开发的js指什么
» 本文来自：前端开发者 » 《canvas 实现火雨效果》
» 本文链接地址：https://www.rokub.com/6686.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论