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

Волосатый фон на HTML5 canvas для uCoz
11.10.14, 09:10:10



Прикольное решение на HTML5. Когда водишь курсором, создаётся ощущение, что гладишь какое-то волосатое животное

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

Установка:

В то место, где нужен блок с таким фоном, вставляйте:
Код
<canvas id="c" width="400" height="400"></canvas>  
  <script>  
document.body.clientWidth; // webkit fix: http://qfox.nl/weblog/218  
// start of submission //  
with(document.body.style) {  
padding = margin = 0;  
overflow = "hidden"  
}  
c = document.getElementById("c");  
w = c.width = this.innerWidth;  
h = c.height = this.innerHeight;  
var g = c.getContext("2d");  
l = [];  

function r(b) {  
return Math.random() * b - b / 2  
}  
for (var i = 0; i++ < 999;) {  
cw = r(w);  
ch = r(h);  
l.push([cw, ch, cw + r(20), ch + r(20), cw + r(99), ch + r(99)])  
}  
colors = [0, 255, 0];  
t = 1;  
rd = function () {  
g.fillStyle = "#000";  
g.fillRect(0, 0, w, h);  
g.strokeStyle = "#aa0";  
g.lineWidth = 1;  
i = 5;  
if (colors[t] > i - 1) {  
colors[t] -= i;  
colors[(t + 1) % 3] += i  
} else turn = (t + 1) % 3;  
ss = "rgba(" + colors.join(",") + ",";  
g.translate(w / 2, h / 2);  
for (i in l) {  
m = l[i];  
dx = x - m[0];  
dy = y - m[1];  
d = Math.sqrt(dx * dx + dy * dy);  
a = 75 / d;  
a = a > 0.75 ? 0.75 : a;  
if (!(a < 0.15)) {  
g.strokeStyle = ss + a + ")";  
if (a > 0.6 && r(4) < -1.9) m[6] = 1;  
if (m[6] > 0) {  
m[6] -= 0.05;  
g.strokeStyle = "rgba(255,255,255," + m[6] + ")"  
}  
g.beginPath();  
g.moveTo(m[0], m[1]);  
g.quadraticCurveTo(m[2] - dx / d * 20, m[3] - dx / d * 20, m[4] - dx / d * 80, m[5] - dy / d * 80);  
g.stroke()  
}  
}  
g.translate(-w / 2, -h / 2)  
};  
document.body.onmousemove = function (b) {  
x = b.clientX - w / 2;  
y = b.clientY - h / 2;  
rd()  
};  
// end of submission  
  </script>


Материал подготовлен Apocalypse
Категория: HTML5 | Добавил: Apocalypse | Теги: HTML5, фон, волосатый, ucoz, для, Canvas, на
Просмотров: 540 | Загрузок: 0 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: