ГЕНЕРАЦИЯ МОЛНИЙ НА HTML5 CANVAS И JQUERY


Данный скрипт позволяет генерировать молнии со случайным интервалом, случайным местоположением, случайной длинны и случайного типа

Установка:

На нужных страницах между <body> и </body> вставьте:

<canvas id="canvas"></canvas>
<script src="/js/light.js"></script>

<canvas id="canvas"></canvas>
<script src="/js/light.js"></script>

Осталось лишь залить JS файл из прикреплённого архива в папку js

Скрипт:

Код:
/*=============================================================================*/
/* Canvas Lightning v1
/*=============================================================================*/
var canvasLightning = function(c, cw, ch) {
    /*=============================================================================*/
    /* Initialize
/*=============================================================================*/
    this.init = function() {
        this.loop();
    };
    /*=============================================================================*/
    /* Variables
/*=============================================================================*/
    var _this = this;
    this.c = c;
    this.ctx = c.getContext('2d');
    this.cw = cw;
    this.ch = ch;
    this.mx = 0;
    this.my = 0;
    this.lightning = [];
    this.lightTimeCurrent = 0;
    this.lightTimeTotal = 50;
    /*=============================================================================*/
    /* Utility Functions
/*=============================================================================*/
    this.rand = function(rMi, rMa) {
        return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
    };
    this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2) {
        return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
    };
    /*=============================================================================*/
    /* Create Lightning
/*=============================================================================*/
    this.createL = function(x, y, canSpawn) {
        this.lightning.push({
            x: x,
            y: y,
            xRange: this.rand(5, 30),
            yRange: this.rand(5, 25),
            path: [{
                x: x,
                y: y
            }],
            pathLimit: this.rand(10, 35),
            canSpawn: canSpawn,
            hasFired: false
        });
    };
    /*=============================================================================*/
    /* Update Lightning
/*=============================================================================*/
    this.updateL = function() {
        var i = this.lightning.length;
        while (i--) {
            var light = this.lightning[i];
            light.path.push({
                x: light.path[light.path.length - 1].x + (this.rand(0, light.xRange) - (light.xRange / 2)),
                y: light.path[light.path.length - 1].y + (this.rand(0, light.yRange))
            });
            if (light.path.length > light.pathLimit) {
                this.lightning.splice(i, 1)
            }
            light.hasFired = true;
        };
    };
    /*=============================================================================*/
    /* Render Lightning
/*=============================================================================*/
    this.renderL = function() {
        var i = this.lightning.length;
        while (i--) {
            var light = this.lightning[i];
            this.ctx.strokeStyle = 'hsla(0, 100%, 100%, ' + this.rand(10, 100) / 100 + ')';
            this.ctx.lineWidth = 1;
            if (this.rand(0, 30) == 0) {
                this.ctx.lineWidth = 2;
            }
            if (this.rand(0, 60) == 0) {
                this.ctx.lineWidth = 3;
            }
            if (this.rand(0, 90) == 0) {
                this.ctx.lineWidth = 4;
            }
            if (this.rand(0, 120) == 0) {
                this.ctx.lineWidth = 5;
            }
            if (this.rand(0, 150) == 0) {
                this.ctx.lineWidth = 6;
            }
            this.ctx.beginPath();
            var pathCount = light.path.length;
            this.ctx.moveTo(light.x, light.y);
            for (var pc = 0; pc < pathCount; pc++) {
                this.ctx.lineTo(light.path[pc].x, light.path[pc].y);
                if (light.canSpawn) {
                    if (this.rand(0, 100) == 0) {
                        light.canSpawn = false;
                        this.createL(light.path[pc].x, light.path[pc].y, false);
                    }
                }
            }
            if (!light.hasFired) {
                this.ctx.fillStyle = 'rgba(255, 255, 255, ' + this.rand(4, 12) / 100 + ')';
                this.ctx.fillRect(0, 0, this.cw, this.ch);
            }
            if (this.rand(0, 30) == 0) {
                this.ctx.fillStyle = 'rgba(255, 255, 255, ' + this.rand(1, 3) / 100 + ')';
                this.ctx.fillRect(0, 0, this.cw, this.ch);
            }
            this.ctx.stroke();
        };
    };
    /*=============================================================================*/
    /* Lightning Timer
/*=============================================================================*/
    this.lightningTimer = function() {
            this.lightTimeCurrent++;
            if (this.lightTimeCurrent >= this.lightTimeTotal) {
                var newX = this.rand(100, cw - 100);
                var newY = this.rand(0, ch / 2);
                var createCount = this.rand(1, 3);
                while (createCount--) {
                    this.createL(newX, newY, true);
                }
                this.lightTimeCurrent = 0;
                this.lightTimeTotal = this.rand(30, 100);
            }
        }
        /*=============================================================================*/
        /* Clear Canvas
/*=============================================================================*/
    this.clearCanvas = function() {
        this.ctx.globalCompositeOperation = 'destination-out';
        this.ctx.fillStyle = 'rgba(0,0,0,' + this.rand(1, 30) / 100 + ')';
        this.ctx.fillRect(0, 0, this.cw, this.ch);
        this.ctx.globalCompositeOperation = 'source-over';
    };
    /*=============================================================================*/
    /* Resize on Canvas on Window Resize
/*=============================================================================*/
    $(window).on('resize', function() {
        _this.cw = _this.c.width = window.innerWidth;
        _this.ch = _this.c.height = window.innerHeight;
    });
    /*=============================================================================*/
    /* Animation Loop
/*=============================================================================*/
    this.loop = function() {
        var loopIt = function() {
            requestAnimationFrame(loopIt, _this.c);
            _this.clearCanvas();
            _this.updateL();
            _this.lightningTimer();
            _this.renderL();
        };
        loopIt();
    };
};
/*=============================================================================*/
/* Check Canvas Support
/*=============================================================================*/
var isCanvasSupported = function() {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
};
/*=============================================================================*/
/* Setup requestAnimationFrame
/*=============================================================================*/
var setupRAF = function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    };
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    };
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    };
};
/*=============================================================================*/
/* Define Canvas and Initialize
/*=============================================================================*/
$(window).load(function() {
    if (isCanvasSupported) {
        var c = document.getElementById('canvas');
        var cw = c.width = window.innerWidth;
        var ch = c.height = window.innerHeight;
        var cl = new canvasLightning(c, cw, ch);
        setupRAF();
        cl.init();
    }
});

[good]  http://sh.uploads.ru/t/5U70e.gif  Android 8.1.0, Chrome,70.0.3538.110