Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Объёмный снег на HTML5 canvas
Объёмный снег на HTML5 canvas
AndreyДата: Среда, 26.11.2014, 18:23:17 | Сообщение # 1
Технарь
Offline
3

Очень красивый объёмный снег на HTML5 canvas. При удачно подобранном фоне видно, что снежок очень объёмный и выглядит очень реалистично

Смотрим мой тест на Фидле

Приступим к установки, сначала пропишем не большой CSS:
Код
#cvs {  
position: fixed;  
top:0px;  
left:0px;  
z-index:-1;  
  }


Теперь после < /head > пропишем основной скрипт, который и будет отображать наши снежинки:
Код
<canvas id="cvs" height="500" width="1920"></canvas>  
  <script>  
  /************* SHIM ************************/  
  window.requestAnimFrame = (function () {  
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {  
window.setTimeout(callback, 1000 / 60);  
};  
  })();  
  /********************************************/  
  var canvas = document.getElementById('cvs'),  
ctx = canvas.getContext('2d'),  
height = canvas.height = document.body.offsetHeight,  
width = canvas.width = document.body.offsetWidth,  
collection = [],  
num_drops = 500, // количество снежинок  
gravity = 1, // скорость падения
windforce = 5, // хрень какая-то  
windmultiplier = 5, // тож непонятная переменная  
maxspeed = 3, // максимальная скорость движения снежинки  
gutter = 0; // процент расстояния от низа экрана, где снежинки тают  

  function Drop() {  
this.x;  
this.y;  
this.radius;  
this.distance;  
this.color;  
this.speed;  
this.vx;  
this.vy;  
  }  
  Drop.prototype = {  
constructor: Drop,  

random_x: function () {  
var n = width * (1 + gutter);  
return (1 - (1 + gutter)) + (Math.random() * n);  
},  
draw: function (ctx) {  
ctx.fillStyle = this.color;  
ctx.beginPath();  
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);  
ctx.closePath();  
ctx.fill();  
}  
  };  

  function draw_frame() {  
// this was recommended (see comments)  
// check it out, just comment out the
// ctx.clearRect(0, 0, width, height);  
// line and uncomment the three below:  

//ctx.globalCompositeOperation="darker";  
//ctx.fillStyle="rgba(0,0,0,0.5)";  
//ctx.fillRect(0,0,width,height);
ctx.clearRect(0, 0, width, height);  

// in a previous attempt I even go as far  
// as to ensure i'm drawing the furthest particles
// first for the z-index overlay.  
// in this run I felt it was unneeded  
collection.forEach(function (drop) {  
// costly but ultimatly I think it's worth it for now  
// I muck with the opacity to help with the illusion of depth  
ctx.globalAlpha = (drop.distance + 1) / 10;  
drop.draw(ctx);  
ctx.globalAlpha = 1;  
drop.x += drop.vx;  
drop.y += drop.vy;  
var lx = drop.vx + windforce;  
lx < maxspeed && lx > 1 - maxspeed && (drop.vx = lx);  
if (drop.y > (drop.distance + 1) / 10 * height) {  
drop.y = Math.random() * -drop.radius * (num_drops / 10);  
drop.x = drop.random_x();  
}  
if (drop.x > width * (1 + gutter)) {  
drop.x = 1 - (width * gutter);  
}  
if (drop.x < 1 - (width * gutter)) {  
drop.x = width * (1 + gutter);  
}  
});  
  }  

  function animate() {  
requestAnimFrame(animate);  
draw_frame();  
  }  

  function windtimer() {  
// this is a super cheap way to do this,  
// i will need to look into how to properly
// emulate wind  
windforce = Math.random() > 0.5 ? windmultiplier : -windmultiplier;  
setTimeout(windtimer, Math.random() * (1000 * 30));  
  }  

  function init() {  
collection = [];  
while (num_drops--) {  
var drop = new Drop(); // todo: make constructor do this shit  
drop.color = "#eee";  
drop.distance = Math.random() * 10 | 0;  
drop.speed = Math.random() * (drop.distance / 10) + gravity;  
drop.vx = 0;  
drop.vy = Math.random() * drop.speed + (drop.speed / 2);  
drop.radius = (drop.distance + 1) / 16 * 3;  
drop.x = drop.random_x();  
drop.y = Math.random() * height;  
collection.push(drop);  
}  
windtimer();  
animate();  
window.onresize = function () {  
height = canvas.height = document.body.offsetHeight;  
width = canvas.width = document.body.offsetWidth;  
};  
  }  
  init();  
  </script>


Всё, у вас на сайте пошёл снег!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
MapaДата: Среда, 26.11.2014, 23:42:09 | Сообщение # 2
Лейтенант
Offline
0
Скоро Новый год и конечно такой снежок красиво будет смотреться на сайте.
Можно еще и гирлянду с лампочками или веточку ели с шарами.


 
профиль
AndreyДата: Четверг, 27.11.2014, 10:17:04 | Сообщение # 3
Технарь
Offline
3
Цитата Mapa ()
Можно еще и гирлянду с лампочками или веточку ели с шарами.

Воспользуйся поиском по разделу, я уже выкладывал это добро!
 
профиль
Форум » О uCoz » Скрипты » Объёмный снег на HTML5 canvas
Страница 1 из 11
Поиск: