ГЕНЕРАЦИЯ МОЛНИЙ НА 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]
Android 8.1.0, Chrome,70.0.3538.110




