当前位置：首页 > news >正文

JS圣诞树

news 来源：原创 2025/4/29 18:56:05

✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页： Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：前端案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：JS圣诞树
更多内容点击 👇
QQ注册界面仿写（HTML+CSS+JS）

💖 前言

一年一度的圣诞节就要到了，最近大家都还在坚持学习吗？本人昨天也不幸杨过了，今天满血复活，是什么给了我这么大的动力？我想应该是学习！今天趁着圣诞节到来之前，送大家一颗吉祥的圣诞树，愿所有的朋友都能健健康康，平平安安的挺过这最艰难的时刻！

💖 效果展示

💖 代码分享

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/domtree.css">
        <style>
            body{
                background-color: black;
            }
            #c{
                width: 1080px;
                height: 1080px;
            }
        </style>
    </head>
    <body>
        <canvas id="c">
            <script>
                var collapsed = true;
                function toggle() {
                    var fs = top.document.getElementsByTagName('frameset')[0];
                    var f = fs.getElementsByTagName('frame');
                    if (collapsed) {
        
                        fs.rows = '30px,*';
        
                        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 = 14;
        
                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 ? 100 : W = 450;
        
                        with (getContext('2d'))
        
                        if (k > 10 | !k)
        
                            for (
        
                                font = '60px Impact',
        
                                V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '305,305,315,.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
        
                                ('Marry Christmas!', U, 360);
        
                        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>
        </canvas>
    </body>
</html>