前端开发光线爆炸特效

东软集团前端开发怎么样 知乎
前端开发怎么添加超链接
前端开发怎么样

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>光线爆炸特效</title>
        <script src=”https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js”></script>
        <style>
            html,
            body,
            div,
            span,
            applet,
            object,
            iframe,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            blockquote,
            pre,
            a,
            abbr,
            acronym,
            address,
            big,
            cite,
            code,
            del,
            dfn,
            em,
            img,
            ins,
            kbd,
            q,
            s,
            samp,
            small,
            strike,
            strong,
            sub,
            sup,
            tt,
            var,
            b,
            u,
            i,
            center,
            dl,
            dt,
            dd,
            ol,
            ul,
            li,
            fieldset,
            form,
            label,
            legend,
            table,
            caption,
            tbody,
            tfoot,
            thead,
            tr,
            th,
            td,
            article,
            aside,
            canvas,
            details,
            embed,
            figure,
            figcaption,
            footer,
            header,
            hgroup,
            menu,
            nav,
            output,
            ruby,
            section,
            summary,
            time,
            mark,
            audio,
            video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            article,
            aside,
            details,
            figcaption,
            figure,
            footer,
            header,
            hgroup,
            menu,
            nav,
            section {
                display: block;
            }
            body {
                line-height: 1;
            }
            ol,
            ul {
                list-style: none;
            }
            blockquote,
            q {
                quotes: none;
            }
            blockquote:before,
            blockquote:after,
            q:before,
            q:after {
                content: ”;
                content: none;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            body {
                background: #000;
                overflow: hidden;
            }
            canvas {
                display: block;
            }
        </style>
    </head>
    <body>
        <canvas id=”c”></canvas>
        <script>
            /*
click to clear and change hue
don’t look at or judge this code
I just kept tweaking values and
adding random things in a messy way
it’s full of magic numbers
*/
            var c, ctx, w, h, cx, cy, branches, startHue, tick
            function rand(min, max) {
                return Math.random() * (max – min) + min
            }
            function randInt(min, max) {
                return Math.floor(min + Math.random() * (max – min + 1))
            }
            function Branch(hue, x, y, angle, vel) {
                var move = 15
                this.x = x + rand(-move, move)
                this.y = y + rand(-move, move)
                this.points = []
                this.angle = angle != undefined ? angle : rand(0, Math.PI * 1)
                this.vel = vel != undefined ? vel : rand(-4, 4)
                this.spread = 0
                this.tick = 0
                this.hue = hue != undefined ? hue : 200
                this.life = 1
                this.decay = 0.0015
                this.dead = false
                this.points.push({
                    x: this.x,
                    y: this.y,
                })
            }
            Branch.prototype.step = function(i) {
                this.life -= this.decay
                if (this.life <= 0) {
                    this.dead = true
                }
                if (!this.dead) {
                    var lastPoint = this.points[this.points.length – 1]
                    this.points.push({
                        x: lastPoint.x + Math.cos(this.angle) * this.vel,
                        y: lastPoint.y + Math.sin(this.angle) * this.vel,
                    })
                    this.angle += rand(-this.spread, this.spread)
                    this.vel *= 0.99
                    this.spread = this.vel * 0.04
                    this.tick++
                    this.hue += 0.3
                } else {
                    branches.splice(i, 1)
                }
            }
            Branch.prototype.draw = function() {
                if (!this.points.length || this.dead) {
                    return false
                }
                var length = this.points.length,
                    i = length – 1,
                    point = this.points[i],
                    lastPoint = this.points[i – randInt(5, 100)]
                //jitter = 8;
                if (lastPoint) {
                    var jitter = 2 + this.life * 6
                    ctx.beginPath()
                    ctx.moveTo(lastPoint.x, lastPoint.y)
                    ctx.lineTo(
                        point.x + rand(-jitter, jitter),
                        point.y + rand(-jitter, jitter),
                    )
                    ctx.lineWidth = 1
                    var alpha = this.life * 0.075
                    ctx.strokeStyle =
                        ‘hsla(‘ +
                        (this.hue + rand(-10, 10)) +
                        ‘, 70%, 40%, ‘ +
                        alpha +
                        ‘)’
                    ctx.stroke()
                }
            }
            function init() {
                c = document.getElementById(‘c’)
                ctx = c.getContext(‘2d’)
                startHue = 220
                branches = []
                reset()
                loop()
            }
            function reset() {
                w = window.innerWidth
                h = window.innerHeight
                cx = w / 2
                cy = h / 2
                branches.length = 0
                c.width = w
                c.height = h
                tick = 0
                for (var i = 0; i < 500; i++) {
                    branches.push(new Branch(startHue, cx, cy))
                }
            }
            function step() {
                var i = branches.length
                while (i–) {
                    branches[i].step(i)
                }
                tick++
            }
            function draw() {
                var i = branches.length
                if (tick < 450) {
                    ctx.save()
                    ctx.globalCompositeOperation = ‘lighter’
                    ctx.globalAlpha = 0.002
                    ctx.translate(cx, cy)
                    var scale = 1 + tick * 0.00025
                    ctx.scale(scale, scale)
                    ctx.translate(-cx, -cy)
                    ctx.drawImage(c, rand(-150, 150), rand(-150, 150))
                    ctx.restore()
                }
                ctx.globalCompositeOperation = ‘lighter’
                while (i–) {
                    branches[i].draw()
                }
            }
            function loop() {
                requestAnimationFrame(loop)
                step()
                draw()
                step()
                draw()
            }
            window.addEventListener(‘resize’, reset)
            window.addEventListener(‘click’, function() {
                startHue += 60
                reset()
            })
            init()
        </script>
    </body>
</html>
前端开发发展怎么样
2017前端开发怎么样
前端开发基础怎么自学
» 本文来自:前端开发者 » 《前端开发光线爆炸特效》
» 本文链接地址:https://www.rokub.com/8140.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!