圣诞将至:js加html5教你写出动态旋转圣诞树。

js与H5 canvas实现动态旋转圣诞树

效果图:

圣诞将至:js加html5教你写出动态旋转圣诞树。

源代码

    <canvas id="c" height="356" width="446">
        <script>
            var collapsed = true;
            function toggle() {
                var fs = top.document.getElementsByTagName('frameset')[0];
                var f = fs.getElementsByTagName('frame');
                if (collapsed) {

                    fs.rows = '250px,*';

                    fs.noResize = false;

                    f[0].noResize = false;

                    f[1].noResize = false;

                }

                else {

                    fs.rows = '30px,*';

                    fs.noResize = true;

                    f[0].noResize = true;

                    f[1].noResize = true;

                }

                collapsed = !collapsed;

            }

        </script>

        <script>

            var b = document.body;

            var c = document.getElementsByTagName('canvas')[0];

            var a = c.getContext('2d');

            document.body.clientWidth;

        </script>

        <script>

            M = Math;

            Q = M.random; J = [];

            U = 16;

            T = M.sin;

            E = M.sqrt;

            for (O = k = 0; x = z = j = i = k < 200;)

                with (M[k] = k ? c.cloneNode(0) : c) {

                    width = height = k ? 32 : W = 446;

                    with (getContext('2d'))

                    if (k > 10 | !k)

                        for (

                            font = '60px Impact',

                            V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '205,205,215,.15)' :

                                V + (147 + I) + ',' + (k % 2 ? 128 + I : 0) + ',' + I + ',.5)' : '#cca', 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], 207 + L[0] * A + L[2] * T(D) >> 0, L[1] >> 1)) {

                    if (i == 2e3)

                        a.fillText

                            ('Happy Christmas!', U, 345);

                    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>


上一篇:Wind7外接显示器选择拓展模式后,鼠标只能往右移动才能切换到外接显示器上,不能修改切换方向


下一篇:圣诞将至:python3几行代码教你写出圣诞树。