Эффект дождя на HTML5 Canvas

Разместил: Apocalypse
24 апреля 2016

Данный пример показывает, как можно реализовать эффект дождя на HTML5 Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В любое место на странице вставьте:

<canvas id="sky"></canvas>

1	<canvas id="sky"></canvas>

2#: В самый низ вашего CSS поместите:

#sky {
width: 100%;
height: 100%;
overflow: hidden;
background: none;
}

#sky {

width: 100%;

height: 100%;

overflow: hidden;

background: none;

}

3#: На нужных страницах после /head вставьте:

<script>
// Setup ///////////////////////////////////////////////////////////
var canvas = document.getElementById('sky');
var sky = canvas.getContext('2d');
var window_width = window.innerWidth * 1.5;
var window_height = window.innerHeight * 1.5;
var fall_speed = 0.5;
var wind_speed = 5;
var rain_weight = 0.04;
var rain_color = '255,255,255';
var drop_count;
var drops = [];
// Helpers /////////////////////////////////////////////////////////
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||
window.oRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

function randomFrom(min, max) {
return (Math.random() * (max - min) + min);
}

function resizer() {
window_width = window.innerWidth * 1.5;
window_height = window.innerHeight * 1.5;
drop_count = window_width * rain_weight;
canvas.setAttribute('width', window_width);
canvas.setAttribute('height', window_height);
}
window.addEventListener('resize', resizer, false);
// Drawing /////////////////////////////////////////////////////////
function paintSky() {
for (var i = 0; i < drop_count; i++) {
drops[i] = new drop();
drops[i].reset();
}
rain();
}

function rain() {
sky.clearRect(0, 0, window_width, window_height);
var drops_length = drops.length;
for (var i = 0; i < drops_length; i++) {
var drop = drops[i];
drop.fall();
drop.draw();
}
window.requestAnimFrame(rain);
}

function drop() {
this.reset = function() {
this.r = randomFrom(0.8, 1.6);
this.l = (this.r * 250);
this.x = randomFrom((window_width * -0.25), (window_width * 1.125));
this.y = randomFrom((window_height * -0.25), (window_height * -
1));
this.dx = randomFrom((wind_speed - 3), (wind_speed + 3));
this.dy = (this.r * (100 * fall_speed));
this.offset = (this.l * (this.dx / this.dy));
this.opacity = (this.r * randomFrom(0.2, 0.6));
this.drip = this.render();
};
this.render = function() {
var canv = document.createElement('canvas');
var ctx = canv.getContext('2d');
canv.setAttribute('width', Math.abs(this.offset) + this.r);
canv.setAttribute('height', this.l);
ctx.beginPath();
var drip = ctx.createLinearGradient(0, 0, 0, this.l);
drip.addColorStop(0, 'rgba(' + rain_color + ', 0)');
drip.addColorStop(1, 'rgba(' + rain_color + ', ' + this.opacity +
')');
ctx.fillStyle = drip;
//sky.rect(this.x, this.y, this.r, this.l);
var startX = (this.offset >= 0) ? 0 : Math.abs(this.offset);
ctx.moveTo(startX, 0);
ctx.lineTo(startX + this.r, 0);
ctx.lineTo(startX + this.r + this.offset, this.l);
ctx.lineTo(startX + this.offset, this.l);
ctx.closePath();
ctx.fill();
return canv;
};
this.draw = function() {
sky.drawImage(this.drip, this.x, this.y);
};
this.fall = function() {
this.x += this.dx;
this.y += this.dy;
if (this.y > (window_height * 1.25)) {
this.reset();
}
};
}
resizer();
paintSky();
</script>

100

101

// Setup ///////////////////////////////////////////////////////////

var canvas = document.getElementById('sky');

var sky = canvas.getContext('2d');

var window_width = window.innerWidth * 1.5;

var window_height = window.innerHeight * 1.5;

var fall_speed = 0.5;

var wind_speed = 5;

var rain_weight = 0.04;

var rain_color = '255,255,255';

var drop_count;

var drops = [];

// Helpers /////////////////////////////////////////////////////////

window.requestAnimFrame = (function() {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||

window.oRequestAnimationFrame || function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

function randomFrom(min, max) {

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

}

function resizer() {

window_width = window.innerWidth * 1.5;

window_height = window.innerHeight * 1.5;

drop_count = window_width * rain_weight;

canvas.setAttribute('width', window_width);

canvas.setAttribute('height', window_height);

}

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

// Drawing /////////////////////////////////////////////////////////

function paintSky() {

for (var i = 0; i < drop_count; i++) {

drops[i] = new drop();

drops[i].reset();

}

rain();

}

function rain() {

sky.clearRect(0, 0, window_width, window_height);

var drops_length = drops.length;

for (var i = 0; i < drops_length; i++) {

var drop = drops[i];

drop.fall();

drop.draw();

}

window.requestAnimFrame(rain);

}

function drop() {

this.reset = function() {

this.r = randomFrom(0.8, 1.6);

this.l = (this.r * 250);

this.x = randomFrom((window_width * -0.25), (window_width * 1.125));

this.y = randomFrom((window_height * -0.25), (window_height * -

1));

this.dx = randomFrom((wind_speed - 3), (wind_speed + 3));

this.dy = (this.r * (100 * fall_speed));

this.offset = (this.l * (this.dx / this.dy));

this.opacity = (this.r * randomFrom(0.2, 0.6));

this.drip = this.render();

};

this.render = function() {

var canv = document.createElement('canvas');

var ctx = canv.getContext('2d');

canv.setAttribute('width', Math.abs(this.offset) + this.r);

canv.setAttribute('height', this.l);

ctx.beginPath();

var drip = ctx.createLinearGradient(0, 0, 0, this.l);

drip.addColorStop(0, 'rgba(' + rain_color + ', 0)');

drip.addColorStop(1, 'rgba(' + rain_color + ', ' + this.opacity +

')');

ctx.fillStyle = drip;

//sky.rect(this.x, this.y, this.r, this.l);

var startX = (this.offset >= 0) ? 0 : Math.abs(this.offset);

ctx.moveTo(startX, 0);

ctx.lineTo(startX + this.r, 0);

ctx.lineTo(startX + this.r + this.offset, this.l);

ctx.lineTo(startX + this.offset, this.l);

ctx.closePath();

ctx.fill();

return canv;

};

this.draw = function() {

sky.drawImage(this.drip, this.x, this.y);

};

this.fall = function() {

this.x += this.dx;

this.y += this.dy;

if (this.y > (window_height * 1.25)) {

this.reset();

}

};

}

resizer();

paintSky();

</script>

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

не в сети 7 дней

Apocalypse

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

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

Метки: Canvas HTML5 Дождь Осень Эффект

Apocalypse

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

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

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

Старые

Новые

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

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

Автор

Apocalypse

8 лет назад

Замечательный эффект! Часто применял его в осенней теме

Ответить

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

......

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

Эффект дождя на HTML5 Canvas

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

Apocalypse

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

Посетители сайта

Панель управления

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Эффект дождя на HTML5 Canvas

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

Apocalypse

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

Горный пейзаж со снегом и полнолунием на CSS3 и HTML5 Canvas

Нейронная сеть на HTML5 Canvas

Классная анимированная кнопка "Скачать" на CSS3 и SVG

Посетители сайта

Панель управления