Новогодняя елка на HTML5

  • Не нравится
  • +2
  • Нравится
Новогодняя елка на HTML5
С наступающими новогодними праздниками! :)
Вот хочу продемонстрировать небольшой код. В общем это елка сделана на HTML5. Использован тег canvas

Сам скрипт можно поместить в любое место сайта или просто в отдельный файл. А вот строчка
<canvas id="c" height="200" width="150"></canvas>

ставиться там, где хотим видить красивую елочку smile

<script type="text/javascript">
    var b = document.body;
    var c = document.getElementsByTagName('canvas')[0];
    var a = c.getContext('2d');
    document.body.clientWidth; // fix bug in chrome.

    M = Math;
    Q = M.random;
    J = [];
    U = 16;
    T = M.sin;
    E = M.sqrt;
    for (O = k = 0; x = z = j = i = k < 150;) with(M[k] = k ? c.cloneNode(0) : c) {
        height = width =  k ? 32 : W = 250;
        height = k ? 32 : W = 300;
        with(getContext('2d')) if (k > 10 | !k) for (font = '32px Impact', V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '255,255,255,.15)' : V + (147 + I) + ',' + (k % 2 ? 128 + I : 0) + ',' + I + ',.5)' : '#006a9c', i < 7;) beginPath(fill(arc(U - i / 3, 24 - i / 2, k == 13 ? 4 - (i++) / 2 : 8 - i++, 0, M.PI * 2, 1)));
        else for (; x = T(i), y = Q() * 2 - 1, D = x * x + y * y, B = E(D - x / .9 - 1.5 * y + 1), R = 67 * (B + 1) * (L = k / 9 + .8) >> 1, i++<W;) if (D < 1) beginPath(strokeStyle = V + R + ',' + (R + B * L >> 0) + ',40,.1)'),
        moveTo(U + x * 8, U + y * 8),
        lineTo(U + x * U, U + y * U),
        stroke();
        for (y = H = k + E(k++) * 25, R = Q() * W; P = 3, j < H;) J[O++] = [x += T(R) * P + Q() * 6 - 3, y += Q() * U - 8, z += T(R - 11) * P + Q() * 6 - 3, j / H * 20 + ((j += U) > H & Q() > .8 ? Q(P = 9) * 4 : 0) >> 1]
    }
    setInterval(function G(m, l) {
        A = T(D - 11);
        if (l) return (m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
        a.clearRect(0, 0, W, W);
        J.sort(G);
        for (i = 0; L = J[i++]; a.drawImage(M[L[3] + 1], 115 + L[0] * A + L[2] * T(D) >> 0, L[1] >> 1)) {
            if (i == 2e3) a.fillText('С Наступающим!', U, 278);
            //if (! (i % 7)) a.drawImage(M[13], ((157 * (i * i) + T(D * 5 + i * i) * 5) % W) >> 0, ((113 * i + (D * i) / 60) % (290 + i / 99)) >> 0);
        }
        D += .02
    },
    1)
</script>


Все просто))
С праздниками вас!

Коментарии

Аватар
Спасибо, все получилось, только в начале и конце скрипта надо добавить
$(document).ready(function() {
-- скрипт --
});
Аватар
Karamba, это не jQuery. Ничего тут не надо добавлять!
Аватар
Добрый день. Наткнулся на вашу елочку, но она не хочет отображаться в Opera и IE. Не подскажете в чем проблема?
Аватар
Говнокод - не показывает в Chrome

Добавление комментария


Имя:*
E-Mail:*
Комментарий:*
  • winkwinkedsmileam
    belayfeelfellowlaughing
    lollovenorecourse
    requestsadtonguewassat
    cryingwhatbullyangry
Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив