Главная » Файлы » Прочие скрипты » HTML5

Ещё один простенький снежок на HTML5 canvas для вашего сайта
07.11.14, 19:11:53



Ещё один снежок, который рисуется сразу в canvas элементе без использования картинок и прочей лишней лабуды

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

После < /head > на нужных страницах вставляйте:
Код
window.onload = function () {  
try {  
snow.count = 30; // number of flakes  
snow.delay = 20; // timer interval  
snow.minSpeed = 2; // minimum movement/time slice  
snow.maxSpeed = 5; // maximum movement/time slice  
snow.start();  
} catch (e) {  
// hmmmm  
}  
  };  

  snow = {  
count: 20,  
delay: 10,  
flutter: 0.2,  
wind: 1.0,  
w1: 1,  
minSpeed: 0.3,  
maxSpeed: 4,  
cv: null,  
flakes: [],  
toggle: function () {  
if (window.snowtimer) snow.stop();  
else snow.start();  
},  
resize: function () {  
snow.cv.width = innerWidth;  
snow.cv.height = innerHeight;  
snow.ct.fillStyle = '#aaa';  
},  
start: function () {  
snow.cv = document.createElement('canvas');  
snow.cv.width = snow.cv.height = 10; // set initial size  
snow.cv.id = 'backgroundSnowCanvas';  
document.body.appendChild(snow.cv);  
snow.createFlake();  
snow.ct = snow.cv.getContext('2d'),  
snow.cv.style.position = 'absolute';  
snow.cv.style.top = 0;  
snow.cv.style.left = 0;  
snow.cv.style.zIndex = -1;  
snow.resize();  
var c = snow.count;  
snow.flakes = [];  
do {  
snow.flakes.push(new snow.flake());  
} while (--c);  
snow.ct.fillRect(0, 0, snow.cv.width, snow.cv.height);  
window.snowtimer = window.setInterval(snow.draw, snow.delay);  
window.addEventListener('resize', snow.resize);  
},  
stop: function () {  
window.clearInterval(window.snowtimer);  
var c = document.getElementById('backgroundSnowCanvas');  
c.parentNode.removeChild(c);  
window.snowtimer = snow = null;  
},  
draw: function () {  
var ct = snow.ct,  
f = snow.flakes,  
c = snow.count;  
ct.fillRect(0, 0, snow.cv.width, snow.cv.height);  

do {  
if (f[--c].draw(ct) && ++fdone) {};  
} while (c);  
snow.wind += Math.cos(snow.w1++/ 180.0);  
},  
flake: function() {  
this.draw = function(ct) {  
ct.drawImage(snow.flakeImage,this.x + snow.wind,this.y,this.sz,this.sz);  
this.animate();  
};  
this.animate = function() {  
this.y += this.speed;  
this.x += this.flutter * Math.cos(snow.flutter * snow.flutter * this.y);  
if(this.y > innerHeight)  
this.init(1);  
};  
this.init = function(f) {  
this.speed = snow.minSpeed + (Math.random() * (snow.maxSpeed - snow.minSpeed));  
this.sz = ~~(Math.random() * 40) + 20;  
this.flutter = ~~(Math.random() * snow.flutter * (60-this.sz));  
this.x = (Math.random() * (innerWidth + this.sz)) - this.sz;  
this.y = f ? -this.sz : Math.random() * innerHeight;  
};  
this.init();  
},  
createFlake: function() {  
snow.flakeImage = document.createElement('canvas');  
snow.flakeImage.width = snow.flakeImage.height = 40;  
var c = snow.flakeImage.getContext('2d');  
c.fillStyle = '#fff';  
c.translate(20,20);  
c.beginPath();  
c.rect(-5,-20,10,40);  
c.rotate(Math.PI /  
3.0);  
c.rect(-5, -20, 10, 40);  
c.rotate(Math.PI / 3.0);  
c.rect(-5, -20, 10, 40);  
c.closePath();  
c.fill();  
},  
  };


Источник статьи можете наблюдать в демо

Материал подготовлен Apocalypse
Категория: HTML5 | Добавил: Apocalypse | Теги: Простенький, Снежок, Ещё, Canvas, на, Вашего, Один, HTML5, сайта, для
Просмотров: 420 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: