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

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

    记录一起走过的那些日子

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

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

    创意代码表白

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

    程序员 520 – 玫瑰花

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    各国语言我爱你

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111

    我爱你一生一世

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    lovecanvas

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    我的心是你的

    在这里插入图片描述

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130

    代码出自菜鸟教程

  • 相关阅读:
    详解AQS中的condition源码原理
    表单判断0也生效相关方法
    走进Redis-扯扯集群
    Python 变量类型
    【无标题】
    数据可视化项目管理软件推荐：提升团队效率的利器
    新知实验室TRTC初体验
    拉普拉斯近似
    对给定的数组进行重新排列numpy.random.shuffle()和numpy.random.permutation()
    （附源码）ssm教材管理系统 毕业设计 011229
  • 原文地址：https://blog.csdn.net/weixin_43847283/article/details/126092305