Javascript学习--烟花

Posted 2020-10-15 眾尋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript学习--烟花相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>烟花-喷泉</title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            html,
            body {
                position: relative;
                width: 100%;
                height: 100%;
            }
            
            body {
                background: #eee;
            }
            
            canvas {
                background: black;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>

    <body>
        <canvas id="c"></canvas>
        <script type="text/javascript">
            ;
            (function(main) {
                main();
            })(function() {
                ‘use strict‘;
                var c = document.getElementById(‘c‘);
                var ctx = c.getContext(‘2d‘);
                var W = c.width = window.innerWidth;
                var H = c.height = window.innerHeight;
                var CX = W / 2;
                var CY = H / 2;

                var Particle = function(x, y, vx, vy) {
                    this.x = x;
                    this.y = y;
                    this.ox = x;
                    this.oy = y;
                    this.vx = vx;
                    this.vy = vy;
                    this.alpha = Math.random();
                    this.color = 25;
                    this.lineWidth = Math.random() * 5;
                };

                Particle.prototype = {
                    constructor: Particle,
                    update: function() {
                        this.vx += Math.random() * 0.5 - 0.25;
                        this.vy += 0.8;
                        this.vy *= 0.98;
                        this.alpha *= 0.95;

                        this.ox = this.x;
                        this.oy = this.y;
                        this.x += this.vx;
                        this.y += this.vy;

                        if(this.y < 0 || this.y > H || this.alpha < 0.1) {
                            this.vx = Math.random() * 2 - 1;
                            this.vy = Math.random() * -50;
                            this.ox = this.x = CX;
                            this.oy = this.y = H;
                            this.alpha = Math.random();
                        }
                    },
                    render: function(ctx) {
                        ctx.save();
                        ctx.globalAlpha = 0.98;
                        ctx.lineWidth = this.lineWidth;
                        ctx.strokeStyle = ‘hsla(‘ + (this.color) + ‘,100%,50%,‘ + this.alpha + ‘)‘;
                        ctx.beginPath();
                        ctx.moveTo(this.ox, this.oy);
                        ctx.lineTo(this.x, this.y);
                        ctx.stroke();
                        ctx.restore();
                    }
                };

                var particleCount = 500;
                var particle = null;
                var particles = [];
                var interval = 0;
                for(var i = 0; i < 250; i++) {
                    particle = new Particle(CX, H, Math.random() * 2 - 1, Math.random() * -50);
                    particles.push(particle);
                }

                requestAnimationFrame(function loop() {
                    requestAnimationFrame(loop);
                    ctx.globalCompositeOperation = ‘source-over‘;
                    ctx.fillStyle = ‘rgba(0,0,0,0.1)‘;
                    ctx.fillRect(0, 0, W, H);
                    ctx.globalCompositeOperation = ‘lighter‘;
                    if(particles.length < particleCount) {
                        particle = new Particle(CX, H, Math.random() * 2 - 1, Math.random() * -50);
                        particles.push(particle);
                    }

                    for(var i = 0, len = particles.length; i < len; i++) {
                        particle = particles[i];
                        particle.update();
                        particle.render(ctx);
                    }
                });
            });
        </script>
    </body>
</html>

以上是关于Javascript学习--烟花的主要内容，如果未能解决你的问题，请参考以下文章

html5 canvas带音效的新年烟花特效，真的好看极了

JavaScript String 简易版烟花

译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务