JS圣诞树

趣享先生

已于 2022-12-23 13:56:45 修改

阅读量1.7k

点赞数 33

CC 4.0 BY-SA版权

分类专栏：前端案例分享专栏文章标签： javascript html 前端

于 2022-12-22 21:35:02 首次发布

本文链接：https://blog.csdn.net/hh867308122/article/details/128413296

前端案例分享专栏专栏收录该内容

27 篇文章

订阅专栏

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

💖 前言

圣诞贺卡作为圣诞节礼物在美国和欧洲很流行，许多家庭随贺卡带上年度家庭合照或家庭新闻，新闻一般包括家庭成员在过去一年的优点特长等内容。圣诞节这天寄赠圣诞贺卡，除表示庆贺圣诞的喜乐外，就是向亲友祝福，以表思念之情。尤其对在孤寂中的亲友，更是亲切的关怀和安慰。

圣诞节装饰包括：圣诞袜，最早以前是一对红色的大袜子，大小不拘。因为圣诞袜是要用来装礼物的，所以是小朋友最喜欢的东西，晚上他们会将自己的袜子挂在床边，等待第二天早上收礼；圣诞帽，是一顶红色帽子，据说晚上戴上睡觉除了睡得安稳和有点暖外，第二天还会发现在帽子里多了点心爱的人送的礼物；圣诞树，通常人们在圣诞前后把一棵常绿植物（如松树）弄进屋里或者放在户外，用圣诞灯和彩色的装饰物装饰，并把一个天使或星星置于树顶，圣诞树起源于德国；圣诞节环，西方国家圣诞节期间挂在家门口用的装饰品，通常用绿色的枝叶或藤条（松毛、松针等）和银色的金属及金色的铃铛配以红色的缎带组成主色调，以绿、白、黄、红四色代表欢乐喜庆，上面还写有MERRY CHRISTMAS或简写为X'mas的字样，圣诞节环最早出现在芬兰。

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

💖 效果展示

💖 代码分享

<!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>