• HTML爱心代码 | 《点燃我温暖你》中男主角——理工男李峋同款

    运行示例：

     完整代码：

    不知道怎么运行的，或者想添加背景图片的往后看！！！！

    HTML代码如下：

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    2. <HTML>
    3.  <HEAD>
    4.   <TITLE> New Document </TITLE>
    5.   <META NAME="Generator" CONTENT="EditPlus">
    6.   <META NAME="Author" CONTENT="">
    7.   <META NAME="Keywords" CONTENT="">
    8.   <META NAME="Description" CONTENT="">
    9.   <style>
    10.   html, body {
    11.   height: 100%;
    12.   padding: 0;
    13.   margin: 0;
    14.   background: #000;
    15. }
    16. canvas {
    17.   position: absolute;
    18.   width: 100%;
    19.   height: 100%;
    20. }
    21.   </style>
    22.  </HEAD>
    23.  
    24.  <BODY>
    25.   <canvas id="pinkboard"></canvas>
    26.   <script>
    27.   /*
    28.  * Settings
    29.  */
    30. var settings = {
    31.   particles: {
    32.     length:   500, // maximum amount of particles
    33.     duration:   2, // particle duration in sec
    34.     velocity: 100, // particle velocity in pixels/sec
    35.     effect: -0.75, // play with this for a nice effect
    36.     size:      30, // particle size in pixels
    37.   },
    38. };
    39.  
    40. /*
    41.  * RequestAnimationFrame polyfill by Erik Möller
    42.  */
    43. (function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());
    44.  
    45. /*
    46.  * Point class
    47.  */
    48. var Point = (function() {
    49.   function Point(x, y) {
    50.     this.x = (typeof x !== 'undefined') ? x : 0;
    51.     this.y = (typeof y !== 'undefined') ? y : 0;
    52.   }
    53.   Point.prototype.clone = function() {
    54.     return new Point(this.x, this.y);
    55.   };
    56.   Point.prototype.length = function(length) {
    57.     if (typeof length == 'undefined')
    58.       return Math.sqrt(this.x * this.x + this.y * this.y);
    59.     this.normalize();
    60.     this.x *= length;
    61.     this.y *= length;
    62.     return this;
    63.   };
    64.   Point.prototype.normalize = function() {
    65.     var length = this.length();
    66.     this.x /= length;
    67.     this.y /= length;
    68.     return this;
    69.   };
    70.   return Point;
    71. })();
    72.  
    73. /*
    74.  * Particle class
    75.  */
    76. var Particle = (function() {
    77.   function Particle() {
    78.     this.position = new Point();
    79.     this.velocity = new Point();
    80.     this.acceleration = new Point();
    81.     this.age = 0;
    82.   }
    83.   Particle.prototype.initialize = function(x, y, dx, dy) {
    84.     this.position.x = x;
    85.     this.position.y = y;
    86.     this.velocity.x = dx;
    87.     this.velocity.y = dy;
    88.     this.acceleration.x = dx * settings.particles.effect;
    89.     this.acceleration.y = dy * settings.particles.effect;
    90.     this.age = 0;
    91.   };
    92.   Particle.prototype.update = function(deltaTime) {
    93.     this.position.x += this.velocity.x * deltaTime;
    94.     this.position.y += this.velocity.y * deltaTime;
    95.     this.velocity.x += this.acceleration.x * deltaTime;
    96.     this.velocity.y += this.acceleration.y * deltaTime;
    97.     this.age += deltaTime;
    98.   };
    99.   Particle.prototype.draw = function(context, image) {
    100.     function ease(t) {
    101.       return (--t) * t * t + 1;
    102.     }
    103.     var size = image.width * ease(this.age / settings.particles.duration);
    104.     context.globalAlpha = 1 - this.age / settings.particles.duration;
    105.     context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
    106.   };
    107.   return Particle;
    108. })();
    109.  
    110. /*
    111.  * ParticlePool class
    112.  */
    113. var ParticlePool = (function() {
    114.   var particles,
    115.       firstActive = 0,
    116.       firstFree   = 0,
    117.       duration    = settings.particles.duration;
    118.   
    119.   function ParticlePool(length) {
    120.     // create and populate particle pool
    121.     particles = new Array(length);
    122.     for (var i = 0; i < particles.length; i++)
    123.       particles[i] = new Particle();
    124.   }
    125.   ParticlePool.prototype.add = function(x, y, dx, dy) {
    126.     particles[firstFree].initialize(x, y, dx, dy);
    127.     
    128.     // handle circular queue
    129.     firstFree++;
    130.     if (firstFree   == particles.length) firstFree   = 0;
    131.     if (firstActive == firstFree       ) firstActive++;
    132.     if (firstActive == particles.length) firstActive = 0;
    133.   };
    134.   ParticlePool.prototype.update = function(deltaTime) {
    135.     var i;
    136.     
    137.     // update active particles
    138.     if (firstActive < firstFree) {
    139.       for (i = firstActive; i < firstFree; i++)
    140.         particles[i].update(deltaTime);
    141.     }
    142.     if (firstFree < firstActive) {
    143.       for (i = firstActive; i < particles.length; i++)
    144.         particles[i].update(deltaTime);
    145.       for (i = 0; i < firstFree; i++)
    146.         particles[i].update(deltaTime);
    147.     }
    148.     
    149.     // remove inactive particles
    150.     while (particles[firstActive].age >= duration && firstActive != firstFree) {
    151.       firstActive++;
    152.       if (firstActive == particles.length) firstActive = 0;
    153.     }
    154.     
    155.     
    156.   };
    157.   ParticlePool.prototype.draw = function(context, image) {
    158.     // draw active particles
    159.     if (firstActive < firstFree) {
    160.       for (i = firstActive; i < firstFree; i++)
    161.         particles[i].draw(context, image);
    162.     }
    163.     if (firstFree < firstActive) {
    164.       for (i = firstActive; i < particles.length; i++)
    165.         particles[i].draw(context, image);
    166.       for (i = 0; i < firstFree; i++)
    167.         particles[i].draw(context, image);
    168.     }
    169.   };
    170.   return ParticlePool;
    171. })();
    172.  
    173. /*
    174.  * Putting it all together
    175.  */
    176. (function(canvas) {
    177.   var context = canvas.getContext('2d'),
    178.       particles = new ParticlePool(settings.particles.length),
    179.       particleRate = settings.particles.length / settings.particles.duration, // particles/sec
    180.       time;
    181.   
    182.   // get point on heart with -PI <= t <= PI
    183.   function pointOnHeart(t) {
    184.     return new Point(
    185.       160 * Math.pow(Math.sin(t), 3),
    186.       130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
    187.     );
    188.   }
    189.   
    190.   // creating the particle image using a dummy canvas
    191.   var image = (function() {
    192.     var canvas  = document.createElement('canvas'),
    193.         context = canvas.getContext('2d');
    194.     canvas.width  = settings.particles.size;
    195.     canvas.height = settings.particles.size;
    196.     // helper function to create the path
    197.     function to(t) {
    198.       var point = pointOnHeart(t);
    199.       point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
    200.       point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
    201.       return point;
    202.     }
    203.     // create the path
    204.     context.beginPath();
    205.     var t = -Math.PI;
    206.     var point = to(t);
    207.     context.moveTo(point.x, point.y);
    208.     while (t < Math.PI) {
    209.       t += 0.01; // baby steps!
    210.       point = to(t);
    211.       context.lineTo(point.x, point.y);
    212.     }
    213.     context.closePath();
    214.     // create the fill
    215.     context.fillStyle = '#ea80b0';
    216.     context.fill();
    217.     // create the image
    218.     var image = new Image();
    219.     image.src = canvas.toDataURL();
    220.     return image;
    221.   })();
    222.   
    223.   // render that thing!
    224.   function render() {
    225.     // next animation frame
    226.     requestAnimationFrame(render);
    227.     
    228.     // update time
    229.     var newTime   = new Date().getTime() / 1000,
    230.         deltaTime = newTime - (time || newTime);
    231.     time = newTime;
    232.     
    233.     // clear canvas
    234.     context.clearRect(0, 0, canvas.width, canvas.height);
    235.     
    236.     // create new particles
    237.     var amount = particleRate * deltaTime;
    238.     for (var i = 0; i < amount; i++) {
    239.       var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
    240.       var dir = pos.clone().length(settings.particles.velocity);
    241.       particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
    242.     }
    243.     
    244.     // update and draw particles
    245.     particles.update(deltaTime);
    246.     particles.draw(context, image);
    247.   }
    248.   
    249.   // handle (re-)sizing of the canvas
    250.   function onResize() {
    251.     canvas.width  = canvas.clientWidth;
    252.     canvas.height = canvas.clientHeight;
    253.   }
    254.   window.onresize = onResize;
    255.   
    256.   // delay rendering bootstrap
    257.   setTimeout(function() {
    258.     onResize();
    259.     render();
    260.   }, 10);
    261. })(document.getElementById('pinkboard'));
    262.   </script>
    263.  </BODY>
    264. </HTML>

    不是计算机专业的同学往下看 怎么运行！！

    首先，在电脑桌面右击新建一个文本文档，并将上面给的代码复制粘贴进去，保存。

    然后重命名这个文本文档，把后缀.txt改为.html格式

     

    点击“是”即可，这时候这个文件就变成你浏览器的图标了，双击即可打开（也可以发给你喜欢的人，他可以直接在电脑上打开）

    如果文件没有变成浏览器图标的话，右击这个文件，选择打开方式用你的浏览器打开即可。

    看下效果：

     

     后缀改了但是还是不行！原因如下：

    部分朋友反应的修改了文件扩展名后没有弹出是否更改的选项，应该是你的电脑没有开启文件扩展名选项，大家打开“此电脑”后，点击查看——显示——勾选文件扩展名，然后再去修改即可！ 

     

     添加背景图片：

    在上面代码的第17行“position: absolute;”后添加下面这两行代码

    1.          background-image: url("love.jpg");
    2.          background-size: contain;

     然后在桌面把你想添加的背景图片命名为love.jpg即可！

    效果图：

    修改爱心颜色

    1.找到你想要修改的颜色的 RGB色值（点击查询）
    2.第215行代码“context.fillStyle = '#ea80b0';”中的 ea80b0 改成你想要颜色的色值即可。

  • 相关阅读:
    【代码随想录算法训练Day65】卡码网47.参加科学大会、卡码网94. 城市间货物运输 I
    git解决ssh: Could not resolve hostname gitlab.xxxx.com
    中贝通信-603220 三季报分析（20231120）
    三翼鸟：产品不会变，场景实时变
    求你了，别在高并发场景中使用悲观锁了！
    安装Canal1.1.5 并监控mysql8的binlog
    Linux 命令使用笔记【sysctl】
    Go语言内置类型和函数
    JS--对象数组深拷贝的方法
    uniapp播放mp4省流方案
  • 原文地址：https://blog.csdn.net/weixin_64103049/article/details/127810821