Мигающие разноцветные световые пятна на HTML5 Canvas

Разместил: Apocalypse
Опубликовано: 21 августа 2016

Очень крутая штука для сайтов, тематика которых связана с развлечениями - данный эффект очень похож на дискотечные огни Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: На нужных страницах между body и /body вставьте:

<canvas id="canv"></canvas>

<script>
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var _w = w * 0.5;
var _h = h * 0.5;
var arr = [];
var cnt = 0;
window.addEventListener('load', resize);
window.addEventListener('resize', resize, false);

function resize() {
c.width = w = window.innerWidth;
c.height = h = window.innerHeight;
c.style.position = 'absolute';
c.style.left = (window.innerWidth - w) * .01 + 'px';
c.style.top = (window.innerHeight - h) * .01 + 'px';
}

function anim() {
cnt++;
if (cnt % 6) draw();
window.requestAnimFrame(anim);
}
anim();

function draw() {
var splot = {
x: rng(_w - 900, _w + 900),
y: rng(_h - 900, _h + 900),
r: rng(20, 80),
spX: rng(-1, 1),
spY: rng(-1, 1)
};
arr.push(splot);
while (arr.length > 100) {
arr.shift();
}
$.clearRect(0, 0, w, h);
for (var i = 0; i < arr.length; i++) {
splot = arr[i];;
$.fillStyle = rndCol();
$.beginPath();
$.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true);
$.shadowBlur = 80;
$.shadowOffsetX = 2;
$.shadowOffsetY = 2;
$.shadowColor = rndCol();
$.globalCompositeOperation = 'lighter';
$.fill();
splot.x = splot.x + splot.spX;
splot.y = splot.y + splot.spY;
splot.r = splot.r * 0.96;
}
}

function rndCol() {
var r = Math.floor(Math.random() * 180);
var g = Math.floor(Math.random() * 60);
var b = Math.floor(Math.random() * 100);
return "rgb(" + r + "," + g + "," + b + ")";
}

function rng(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

window.requestAnimFrame = (function() {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

var c = document.getElementById('canv');

var $ = c.getContext('2d');

var w = c.width = window.innerWidth;

var h = c.height = window.innerHeight;

var _w = w * 0.5;

var _h = h * 0.5;

var arr = [];

var cnt = 0;

window.addEventListener('load', resize);

window.addEventListener('resize', resize, false);

function resize() {

c.width = w = window.innerWidth;

c.height = h = window.innerHeight;

c.style.position = 'absolute';

c.style.left = (window.innerWidth - w) * .01 + 'px';

c.style.top = (window.innerHeight - h) * .01 + 'px';

}

function anim() {

cnt++;

if (cnt % 6) draw();

window.requestAnimFrame(anim);

}

anim();

function draw() {

var splot = {

x: rng(_w - 900, _w + 900),

y: rng(_h - 900, _h + 900),

r: rng(20, 80),

spX: rng(-1, 1),

spY: rng(-1, 1)

};

arr.push(splot);

while (arr.length > 100) {

arr.shift();

}

$.clearRect(0, 0, w, h);

for (var i = 0; i < arr.length; i++) {

splot = arr[i];;

$.fillStyle = rndCol();

$.beginPath();

$.arc(splot.x, splot.y, splot.r, 0, Math.PI * 2, true);

$.shadowBlur = 80;

$.shadowOffsetX = 2;

$.shadowOffsetY = 2;

$.shadowColor = rndCol();

$.globalCompositeOperation = 'lighter';

$.fill();

splot.x = splot.x + splot.spX;

splot.y = splot.y + splot.spY;

splot.r = splot.r * 0.96;

}

function rndCol() {

var r = Math.floor(Math.random() * 180);

var g = Math.floor(Math.random() * 60);

var b = Math.floor(Math.random() * 100);

return "rgb(" + r + "," + g + "," + b + ")";

}

function rng(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

</script>

Автор публикации

не в сети 4 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: Canvas HTML5 Light Liquid Мигающие Пятна Разноцветные Свет

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться