七夕来袭——属于程序员的浪漫

超、凢脫俗 2023-09-28 17:50 18阅读 0赞

\*七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀一秀IT人的浪漫！

### 记录一起走过的那些日子 ###

讲述和亲爱的TA一起经历的那些故事

*  那些初见印象
 *  那些浪漫的开始
 *  那些铭记于心的大小事
 *  那些经历的曲折
 *  那些经历的幸福与快乐
 *  那些珍贵的瞬间
 *  那些对未来的期许/计划  
    …

### 创意代码表白 ###

以程序员的方式撒狗粮，专业浪漫，值得拥有！

> #### 程序员 520 – 玫瑰花 ####

![在这里插入图片描述][dde0f8a3e2ce47d1828ca8c547654827.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        .flower {
          
            margin-left: 32%;
            margin-top: 9%;
        }
    </style>
    
    <body>
        <canvas id="c" class="flower"></canvas>
    </body>
    
    </html>
    <script>
        var b = document.body;
        var c = document.getElementsByTagName('canvas')[0];
        var a = c.getContext('2d');
        document.body.clientWidth;
    
        with (m = Math) C = cos, S = sin, P = pow, R = random; c.width = c.height = f = 600; h = -250; function p(a, b, c) {
           if (c > 60) return [S(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) - S(b) * 50, b * f + 50, 625 + C(a * 7) * (13 + 5 / (.2 + P(b * 4, 4))) + b * 400, a * 1 - b / 2, a]; A = a * 2 - 1; B = b * 2 - 1; if (A * A + B * B < 1) {
           if (c > 37) {
           n = (j = c & 1) ? 6 : 4; o = .5 / (a + .01) + C(b * 125) * 3 - a * 300; w = b * h; return [o * C(n) + w * S(n) + j * 610 - 390, o * S(n) - w * C(n) + 550 - j * 350, 1180 + C(B + A) * 99 - j * 300, .4 - a * .1 + P(1 - B * B, -h * 6) * .15 - a * b * .4 + C(a + b) / 5 + P(C((o * (a + 1) + (B > 0 ? w : -w)) / 25), 30) * .1 * (1 - B * B), o / 1e3 + .7 - o * w * 3e-6] } if (c > 32) {
           c = c * 1.16 - .15; o = a * 45 - 20; w = b * b * h; z = o * S(c) + w * C(c) + 620; return [o * C(c) - w * S(c), 28 + C(B * .5) * 99 - b * b * b * 60 - z / 2 - h, z, (b * b * .3 + P((1 - (A * A)), 7) * .15 + .3) * b, b * .7] } o = A * (2 - b) * (80 - c * 2); w = 99 - C(A) * 120 - C(b) * (-h - c * 4.9) + C(P(1 - b, 7)) * 50 + c * 2; z = o * S(c) + w * C(c) + 700; return [o * C(c) - w * S(c), B * 99 - C(P(b, 7)) * 50 - c / 3 - z / 1.35 + 450, z, (1 - b / 1.2) * .9 + a * .1, P((1 - b), 20) / 4 + .05] } } setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}', 0)
    </script>

> #### 各国语言我爱你 ####

![在这里插入图片描述][f6f78149a315470c986125a628ade943.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.staticfile.org/d3/4.13.0/d3.min.js"></script>
        <style>
            body {
          
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
        overflow: hidden;
    }
    
    .love {
          
        width: 450px;
        height: 450px;
        position: relative;
    }
    
    .love span {
          
        position: absolute;
        left: 0;
        color: goldenrod;
        font-size: 20px;
        font-family: sans-serif;
        text-shadow: 0 0 1em white;
        animation: 
            x-move 10s ease-in-out infinite alternate,
            y-move 20s linear infinite;
        animation-delay: calc(20s / var(--particles) * var(--n) * -1);
        user-select: none;
    }
    
    .love span:first-child {
          
        color: orangered;
        font-size: 3em;
        text-shadow: 
            0 0 0.1em black,
            0 0 1em white;
        z-index: 1;
    }
    
    @keyframes x-move {
          
        to {
          
            left: 450px;
        }
    }
    
    @keyframes y-move {
          
        0% {
           transform: translateY(180px); }
        10% {
           transform: translateY(45px); }
        15% {
           transform: translateY(5px); }
        18% {
           transform: translateY(0); }
        20% {
           transform: translateY(5px); }
        22% {
           transform: translateY(35px); }
        24% {
           transform: translateY(65px); }
        25% {
           transform: translateY(110px); }
        26% {
           transform: translateY(65px); }
        28% {
           transform: translateY(35px); }
        30% {
           transform: translateY(5px); }
        32% {
           transform: translateY(0); }
        35% {
           transform: translateY(5px); }
        40% {
           transform: translateY(45px); }
        50% {
           transform: translateY(180px); }
        71% {
           transform: translateY(430px); }
        72.5% {
           transform: translateY(440px); }
        75% {
           transform: translateY(450px); }
        77.5% {
           transform: translateY(440px); }
        79% {
           transform: translateY(430px); }
        100% {
           transform: translateY(180px); }
    }
        </style>
    </head>
    
    <body>
        <div class="love"></div>
    </body>
    
    </html>
    <script>
        const words = [
            '愛', 'Love', 'Amour', 'Liebe', 'Amore',
            'Amor', 'Любовь', 'الحب', 'प्यार', 'Cinta',
            'Αγάπη', '사랑', 'Liefde', 'Dashuri', 'Каханне',
            'Ljubav', 'Láska', 'Armastus', 'Mahal', 'אהבה',
            'Szerelem', 'Grá', 'Mīlestība', 'Meilė', 'Любов',
            'Љубовта', 'Cinta', 'عشق', 'Dragoste', 'Láska',
            'Renmen', 'ፍቅር', 'munaña', 'Sevgi', 'Љубав',
            'karout', 'amà', 'amôr', 'kærleiki', 'mborayhu',
            'Upendo', 'sòòyayyàà', 'ljubav', 'Սեր', 'сүю',
            'сүйүү', 'tia', 'aroha', 'KHAIR', 'प्रेम',
            'kjærlighet', 'munay', 'jecel', 'Kärlek', 'soymek',
            'Mahal', 'ярату', 'محبت', 'sopp', 'uthando',
            'ความรัก', 'Aşk', 'Tình yêu', 'ליבע'];
    
        d3.select('.love')
            .style('--particles', words.length)
            .selectAll('span')
            .data(words)
            .enter()
            .append('span')
            .style('--n', (d, i) => i + 1)
            .text((d) => d);
    </script>

> #### 我爱你一生一世 ####

![在这里插入图片描述][8130be2ee5984355990540fd727c8ec5.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .heart {
          
      position: relative;
      width: 100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
          
      position: absolute;
      content: "";
      left: 150px;
      top: 0;
      width: 150px;
      height: 240px;
      background: red;
      border-radius: 150px 150px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after {
          
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }
        </style>
    </head>
    <body>
    
      <div class="heart"></div>
    </body>
    </html>

> #### lovecanvas ####

![在这里插入图片描述][237392b1a8e54ba7a8b775d1d2d26c61.gif]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="cavs"></canvas>
    </body>
    
    </html>
    <script>
        var canvas = document.getElementById("cavs");
        const WIDTH = window.innerWidth;
        const HEIGHT = window.innerHeight;
        canvas.setAttribute("width", WIDTH);
        canvas.setAttribute("height", HEIGHT);
        var context = canvas.getContext("2d");
        var start =
        {
          
            loves: [],
            DURATION: 30,
            begin: function () {
          
                this.createLove();
            },
            createLove: function () {
          
                for (var i = 0; i < WIDTH / 59; i++) {
          
                    var love = new Love();
                    this.loves.push(love);
                }
                setInterval(this.drawLove.bind(this), this.DURATION);
            },
            drawLove: function () {
          
                context.clearRect(0, 0, WIDTH, HEIGHT);
                for (var key in this.loves) {
          
                    this.loves[key].draw();
                }
            }
        }
        function Love() {
          
            var me = this;
            function rand() {
          
                me.attr.scale = (Math.random() * 0.8 + 0.3) * WIDTH / 521;
                me.attr.x = Math.floor(Math.random() * WIDTH - 40);
                me.attr.y = Math.floor(HEIGHT - Math.random() * 200);
                me.attr.ColR = Math.floor(Math.random() * 255);
                me.attr.ColG = Math.floor(Math.random() * 255);
                me.attr.ColB = Math.floor(Math.random() * 255);
                me.attr.alpha = Math.random() * 0.2 + 0.8;
                me.attr.vector = Math.random() * 5 + 0.4;
            }
            (function () {
           me.attr = {
          }; rand(); }());
            me.draw = function () {
          
                if (me.attr.alpha < 0.01) rand();
                x = me.attr.x;
                y = me.attr.y;
                scale = 4 * me.attr.scale;
                context.beginPath();
                context.bezierCurveTo(x + 2.5 * scale, y + 2.5 * scale, x + 2.0 * scale, y, x, y);
                context.bezierCurveTo(x - 3.0 * scale, y, x - 3.0 * scale, y + 3.5 * scale, x - 3.0 * scale, y + 3.5 * scale);
                context.bezierCurveTo(x - 3.0 * scale, y + 5.5 * scale, x - 1.0 * scale, y + 7.7 * scale, x + 2.5 * scale, y + 9.5 * scale);
                context.bezierCurveTo(x + 6.0 * scale, y + 7.7 * scale, x + 8.0 * scale, y + 5.5 * scale, x + 8.0 * scale, y + 3.5 * scale);
                context.bezierCurveTo(x + 8.0 * scale, y + 3.5 * scale, x + 8.0 * scale, y, x + 5.0 * scale, y);
                context.bezierCurveTo(x + 3.5 * scale, y, x + 2.5 * scale, y + 2.5 * scale, x + 2.5 * scale, y + 2.5 * scale);
                context.fillStyle = "rgba(" + me.attr.ColR + "," + me.attr.ColG + "," + me.attr.ColB + "," + me.attr.alpha + ")";
                context.fill();
                context.lineWidth = 0.5;
                context.stroke();
                me.attr.y -= me.attr.vector;
                me.attr.alpha -= (me.attr.vector / 2.9 * 3.5 / HEIGHT);
            }
        }
        window.onload = function () {
          
            start.begin();
        }
    </script>

> #### 我的心是你的 ####

![在这里插入图片描述][0af75583335342c28744912058cda9e6.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <canvas id="c"></canvas>
    </body>
    </html>
    <script>
        var b = document.body,
        c = document.getElementsByTagName('canvas')[0],
        a = c.getContext('2d');
     
    document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218
    
    // ### Pixel Love - a js1k 2012 entry by @aaronsnoswell
    // This demo is on [github](https://github.com/aaronsnoswell/js1k-2012-love)
    
    // You can also browse the annotated source code at [http://aaronsnoswell.github.com/js1k-2012-love/docs/](http://aaronsnoswell.github.com/js1k-2012-love/docs/)
    
    // Define some variables:
    
    var h = "❤",      // A heart
        g = 5,        // The granularity - determines the size of each 'pixel'
        l = 10,       // The threshold / limit, used for determining where to place pixels
        outline = [], // Arrays of locations for the outline and fill pixles
        fill = [],
        sx = 100,     // Where to draw the heart
        sy = 350,
        box = [999, 999, 0, 0]; // The bounding box of the heart (computed later)
    
    // Set the canvas size
    c.width = 500;
    c.height = 400;
    
    // A utility function, used for looping over an x and y variable
    var loopxy = function(w, h, step, callback) {
          
        for(var x=0; x<w; x+=step) {
          
            for(var y=0; y<h; y+=step) {
          
                callback(x, y, step);
            }
        }
    }
    
    // Shortcut method for clearing the canvas
    a.clear = function() {
          
        a.clearRect(0, 0, c.width, c.height);
    }
    
    // Normalise browser font rendering in the canvas.
    // See [https://twitter.com/#!/aaronsnoswell/status/165642474109419520](https://twitter.com/#!/aaronsnoswell/status/165642474109419520)
    a.textBaseline = "bottom";
    a.font="300pt arial";
    a.lineWidth = g*2;
    
    // Draw a filled heart on the canvas
    a.fillText(h, sx, sy);
    
    // Loop over the entire canvas and wherever there are filled pixels,
    // store that location in the fill array
    var d = a.getImageData(0, 0, c.width, c.height)
    loopxy(d.width, d.height, g, function(x, y) {
          
        if(d.data[(x + y*d.width)*4+3] >= l) fill.push([x, y]);
    });
    
    // Clear the screen
    a.clear();
    
    // Draw an outline of a heart on the canvas
    a.strokeText(h, sx, sy);
    
    // Loop over the entire canvas once again. Wherever there are filled
    // pixels, store that location in the outline array
    var d = a.getImageData(0, 0, c.width, c.height)
    loopxy(d.width, d.height, g, function(x, y) {
          
        if(d.data[(x + y*d.width)*4+3] >= l) {
          
            outline.push([x, y]);
            
            // Compute the bounding box of the heart
            if(x<box[0]) box[0] = x;
            if(x>box[2]) box[2] = x;
            if(y<box[1]) box[1] = y;
            if(y>box[3]) box[3] = y;
        }
    });
    
    // Find the middle x and y locations of the heart
    box.push((box[0]+box[2])/2);
    box.push((box[1]+box[3])/2);
    
    // Store the current time as ms since epoch
    var t0 = new Date().getTime();
    
    // Use a recursive named function + setTimeout to ensure each frame has
    // time to finish before the next one is drawn
    (function render() {
          
        window.setTimeout(function() {
          
            // Time delta and elapsed time
            var d = new Date().getTime()-t0;
            t0 += d;
            
            // Clear the screen
            a.clear();
            
            // Draw the red heart
            a.fillStyle = "#f00";
            loopxy(fill.length, 1, 1, function(i) {
          
                var x = fill[i][0],
                    y = fill[i][1];
                // Offset each pixel by a sinusoidal, time based ammount
                a.fillRect(x-g/2+Math.sin(t0/500+y/80)*(x-box[4])+10, y-g/2+10, g, g);
            })
            
            // Draw the outline using the same logic as above
            a.fillStyle = "#000";
            loopxy(outline.length, 1, 1, function(i) {
          
                var x = outline[i][0],
                    y = outline[i][1];
                a.fillRect(x-g/2+Math.sin(t0/500+y/80)*(x-box[4])+10, y-g/2+10, g, g);
            })
            
            // Loop at 30fps
            render();
        }, 1/30);
    })();
    </script>

> 代码出自[菜鸟教程][Link 1]

[dde0f8a3e2ce47d1828ca8c547654827.gif_pic_center]: https://img-blog.csdnimg.cn/dde0f8a3e2ce47d1828ca8c547654827.gif#pic_center
[f6f78149a315470c986125a628ade943.gif_pic_center]: https://img-blog.csdnimg.cn/f6f78149a315470c986125a628ade943.gif#pic_center
[8130be2ee5984355990540fd727c8ec5.png_pic_center]: https://img-blog.csdnimg.cn/8130be2ee5984355990540fd727c8ec5.png#pic_center
[237392b1a8e54ba7a8b775d1d2d26c61.gif]: https://img-blog.csdnimg.cn/237392b1a8e54ba7a8b775d1d2d26c61.gif
[0af75583335342c28744912058cda9e6.gif_pic_center]: https://img-blog.csdnimg.cn/0af75583335342c28744912058cda9e6.gif#pic_center
[Link 1]: https://c.runoob.com/codedemo/