定制网站爱心代码李峋同款爱心 python html

目录

前言

定制网站最近那个电视剧很火，定制网站就是搞爱心代码的，定制网站本人兴趣使然，定制网站在网上搜集了一些代码，定制网站经过一定修改，定制网站做一个小总结。

一、python

运行

定制网站主要用的包都是那么几个，csdn搜pycharm定制网站怎么导包就可以。

1.python 第一个

成品效果

 

调整思路

HEART_COLOR = "#EEAEEE"  #定制网站引号内修改颜色！定制网站颜色代码放在文章末尾

定制网站双引号里面可以在csdn搜RGB颜色，比如，定制网站直接看里面的对照表，把包括#定制网站的数字或字母替换就可定制网站以换颜色了

代码如下

  1. import random
  2. from math import sin, cos, pi, log
  3. from tkinter import *
  4.  
  5. CANVAS_WIDTH = 840  # 画布的宽
  6. CANVAS_HEIGHT = 680  # 画布的高
  7. CANVAS_CENTER_X = CANVAS_WIDTH / 2  # 画布中心的X轴坐标
  8. CANVAS_CENTER_Y = CANVAS_HEIGHT / 2  # 画布中心的Y轴坐标
  9. IMAGE_ENLARGE = 11  # 放大比例
  10.  
  11. HEART_COLOR = "#EEAEEE"  #引号内修改颜色！颜色代码放在文章末尾
  12.  
  13. def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
  14.     """
  15.     “爱心函数生成器”
  16.     :param shrink_ratio: 放大比例
  17.     :param t: 参数
  18.     :return: 坐标
  19.     """
  20.     # 基础函数
  21.     x = 17 * (sin(t) ** 3)
  22.     y = -(16 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(3 * t))
  23.  
  24.     # 放大
  25.     #x *= shrink_ratio
  26.     #y *= shrink_ratio
  27.     x*=IMAGE_ENLARGE
  28.     y*=IMAGE_ENLARGE
  29.     # 移到画布中央
  30.     x += CANVAS_CENTER_X
  31.     y += CANVAS_CENTER_Y
  32.  
  33.     return int(x), int(y)
  34.  
  35.  
  36. def scatter_inside(x, y, beta=0.15):
  37.     """
  38.     随机内部扩散
  39.     :param x: 原x
  40.     :param y: 原y
  41.     :param beta: 强度
  42.     :return: 新坐标
  43.     """
  44.     ratio_x = - beta * log(random.random())
  45.     ratio_y = - beta * log(random.random())
  46.  
  47.     dx = ratio_x * (x - CANVAS_CENTER_X)
  48.     dy = ratio_y * (y - CANVAS_CENTER_Y)
  49.  
  50.     return x - dx, y - dy
  51.  
  52.  
  53. def shrink(x, y, ratio):
  54.     """
  55.     抖动
  56.     :param x: 原x
  57.     :param y: 原y
  58.     :param ratio: 比例
  59.     :return: 新坐标
  60.     """
  61.     force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)  # 这个参数...
  62.     dx = ratio * force * (x - CANVAS_CENTER_X)
  63.     dy = ratio * force * (y - CANVAS_CENTER_Y)
  64.     return x - dx, y - dy
  65.  
  66.  
  67. def curve(p):
  68.     """
  69.     自定义曲线函数，调整跳动周期
  70.     :param p: 参数
  71.     :return: 正弦
  72.     """
  73.     # 可以尝试换其他的动态函数，达到更有力量的效果（贝塞尔？）
  74.     return 2 * (2 * sin(4 * p)) / (2 * pi)
  75.  
  76.  
  77. class Heart:
  78.     """
  79.     爱心类
  80.     """
  81.  
  82.     def __init__(self, generate_frame=20):
  83.         self._points = set()  # 原始爱心坐标集合
  84.         self._edge_diffusion_points = set()  # 边缘扩散效果点坐标集合
  85.         self._center_diffusion_points = set()  # 中心扩散效果点坐标集合
  86.         self.all_points = {}  # 每帧动态点坐标
  87.         self.build(2000)
  88.  
  89.         self.random_halo = 1000
  90.  
  91.         self.generate_frame = generate_frame
  92.         for frame in range(generate_frame):
  93.             self.calc(frame)
  94.  
  95.     def build(self, number):
  96.         # 爱心
  97.         for _ in range(number):
  98.             t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
  99.             x, y = heart_function(t)
  100.             self._points.add((x, y))
  101.  
  102.         # 爱心内扩散
  103.         for _x, _y in list(self._points):
  104.             for _ in range(3):
  105.                 x, y = scatter_inside(_x, _y, 0.05)
  106.                 self._edge_diffusion_points.add((x, y))
  107.  
  108.         # 爱心内再次扩散
  109.         point_list = list(self._points)
  110.         for _ in range(10000):
  111.             x, y = random.choice(point_list)
  112.             x, y = scatter_inside(x, y, 0.27)
  113.             self._center_diffusion_points.add((x, y))
  114.  
  115.     @staticmethod
  116.     def calc_position(x, y, ratio):
  117.         # 调整缩放比例
  118.         force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.420)  # 魔法参数
  119.  
  120.         dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
  121.         dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)
  122.  
  123.         return x - dx, y - dy
  124.  
  125.     def calc(self, generate_frame):
  126.         ratio = 15 * curve(generate_frame / 10 * pi)  # 圆滑的周期的缩放比例
  127.  
  128.         halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
  129.         halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))
  130.  
  131.         all_points = []
  132.  
  133.         # 光环
  134.         heart_halo_point = set()  # 光环的点坐标集合
  135.         for _ in range(halo_number):
  136.             t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
  137.             x, y = heart_function(t, shrink_ratio=-15)  # 魔法参数
  138.             x, y = shrink(x, y, halo_radius)
  139.             if (x, y) not in heart_halo_point:
  140.                 # 处理新的点
  141.                 heart_halo_point.add((x, y))
  142.                 x += random.randint(-60, 60)
  143.                 y += random.randint(-60, 60)
  144.                 size = random.choice((1, 1, 2))
  145.                 all_points.append((x, y, size))
  146.                 all_points.append((x+20, y+20, size))
  147.                 all_points.append((x-20, y -20, size))
  148.                 all_points.append((x+20, y - 20, size))
  149.                 all_points.append((x - 20, y +20, size))
  150.  
  151.         # 轮廓
  152.         for x, y in self._points:
  153.             x, y = self.calc_position(x, y, ratio)
  154.             size = random.randint(1, 3)
  155.             all_points.append((x, y, size))
  156.  
  157.         # 内容
  158.         for x, y in self._edge_diffusion_points:
  159.             x, y = self.calc_position(x, y, ratio)
  160.             size = random.randint(1, 2)
  161.             all_points.append((x, y, size))
  162.  
  163.         for x, y in self._center_diffusion_points:
  164.             x, y = self.calc_position(x, y, ratio)
  165.             size = random.randint(1, 2)
  166.             all_points.append((x, y, size))
  167.  
  168.         self.all_points[generate_frame] = all_points
  169.  
  170.     def render(self, render_canvas, render_frame):
  171.         for x, y, size in self.all_points[render_frame % self.generate_frame]:
  172.             render_canvas.create_rectangle(x, y, x + size, y + size, width=0, fill=HEART_COLOR)
  173.  
  174.  
  175. def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
  176.     render_canvas.delete('all')
  177.     render_heart.render(render_canvas, render_frame)
  178.     main.after(1, draw, main, render_canvas, render_heart, render_frame + 1)
  179.  
  180.  
  181. if __name__ == '__main__':
  182.     root = Tk()
  183.     canvas = Canvas(root, bg='black', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
  184.     canvas.pack()
  185.     heart = Heart()
  186.     draw(root, canvas, heart)
  187.     root.mainloop()

2.python第二个

成品效果

 

调整思路

HEART_COLOR = "#EEAEEE"  #心的颜色

调整颜色的思路同上

代码如下

  1. import random
  2. from math import sin, cos, pi, log
  3. from tkinter import *
  4.  
  5. CANVAS_WIDTH = 640  # 画布的宽
  6. CANVAS_HEIGHT = 480  # 画布的高
  7. CANVAS_CENTER_X = CANVAS_WIDTH / 2  # 画布中心的X轴坐标
  8. CANVAS_CENTER_Y = CANVAS_HEIGHT / 2  # 画布中心的Y轴坐标
  9. IMAGE_ENLARGE = 11  # 放大比例
  10. HEART_COLOR = "pink"  # 心的颜色
  11.  
  12.  
  13. def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
  14.     """
  15.     “爱心函数生成器”
  16.     :param shrink_ratio: 放大比例
  17.     :param t: 参数
  18.     :return: 坐标
  19.     """
  20.     # 基础函数
  21.     x = 16 * (sin(t) ** 3)
  22.     y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))
  23.  
  24.     # 放大
  25.     x *= shrink_ratio
  26.     y *= shrink_ratio
  27.  
  28.     # 移到画布中央
  29.     x += CANVAS_CENTER_X
  30.     y += CANVAS_CENTER_Y
  31.  
  32.     return int(x), int(y)
  33.  
  34.  
  35. def scatter_inside(x, y, beta=0.15):
  36.     """
  37.     随机内部扩散
  38.     :param x: 原x
  39.     :param y: 原y
  40.     :param beta: 强度
  41.     :return: 新坐标
  42.     """
  43.     ratio_x = - beta * log(random.random())
  44.     ratio_y = - beta * log(random.random())
  45.  
  46.     dx = ratio_x * (x - CANVAS_CENTER_X)
  47.     dy = ratio_y * (y - CANVAS_CENTER_Y)
  48.  
  49.     return x - dx, y - dy
  50.  
  51.  
  52. def shrink(x, y, ratio):
  53.     """
  54.     抖动
  55.     :param x: 原x
  56.     :param y: 原y
  57.     :param ratio: 比例
  58.     :return: 新坐标
  59.     """
  60.     force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)  # 这个参数...
  61.     dx = ratio * force * (x - CANVAS_CENTER_X)
  62.     dy = ratio * force * (y - CANVAS_CENTER_Y)
  63.     return x - dx, y - dy
  64.  
  65.  
  66. def curve(p):
  67.     """
  68.     自定义曲线函数，调整跳动周期
  69.     :param p: 参数
  70.     :return: 正弦
  71.     """
  72.     return 4 * (2 * sin(4 * p)) / (2 * pi)
  73.  
  74.  
  75. class Heart:
  76.     """
  77.     爱心类
  78.     """
  79.  
  80.     def __init__(self, generate_frame=20):
  81.         self._points = set()  # 原始爱心坐标集合
  82.         self._edge_diffusion_points = set()  # 边缘扩散效果点坐标集合
  83.         self._center_diffusion_points = set()  # 中心扩散效果点坐标集合
  84.         self.all_points = {}  # 每帧动态点坐标
  85.         self.build(2000)
  86.  
  87.         self.random_halo = 1000
  88.  
  89.         self.generate_frame = generate_frame
  90.         for frame in range(generate_frame):
  91.             self.calc(frame)
  92.  
  93.     def build(self, number):
  94.         # 爱心
  95.         for _ in range(number):
  96.             t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
  97.             x, y = heart_function(t)
  98.             self._points.add((x, y))
  99.  
  100.         # 爱心内扩散
  101.         for _x, _y in list(self._points):
  102.             for _ in range(3):
  103.                 x, y = scatter_inside(_x, _y, 0.05)
  104.                 self._edge_diffusion_points.add((x, y))
  105.  
  106.         # 爱心内再次扩散
  107.         point_list = list(self._points)
  108.         for _ in range(4000):
  109.             x, y = random.choice(point_list)
  110.             x, y = scatter_inside(x, y, 0.17)
  111.             self._center_diffusion_points.add((x, y))
  112.  
  113.     @staticmethod
  114.     def calc_position(x, y, ratio):
  115.         # 调整缩放比例
  116.         force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.520)
  117.  
  118.         dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
  119.         dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)
  120.  
  121.         return x - dx, y - dy
  122.  
  123.     def calc(self, generate_frame):
  124.         ratio = 10 * curve(generate_frame / 10 * pi)  # 圆滑的周期的缩放比例
  125.  
  126.         halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
  127.         halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))
  128.  
  129.         all_points = []
  130.  
  131.         # 光环
  132.         heart_halo_point = set()  # 光环的点坐标集合
  133.         for _ in range(halo_number):
  134.             t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
  135.             x, y = heart_function(t, shrink_ratio=11)
  136.             x, y = shrink(x, y, halo_radius)
  137.             if (x, y) not in heart_halo_point:
  138.                 # 处理新的点
  139.                 heart_halo_point.add((x, y))
  140.                 x += random.randint(-11, 11)
  141.                 y += random.randint(-11, 11)
  142.                 size = random.choice((1, 2, 2))#控制外围粒子的大小
  143.                 all_points.append((x, y, size))
  144.  
  145.         # 轮廓
  146.         for x, y in self._points:
  147.             x, y = self.calc_position(x, y, ratio)
  148.             size = random.randint(1, 3)
  149.             all_points.append((x, y, size))
  150.  
  151.         # 内容
  152.         for x, y in self._center_diffusion_points:
  153.             x, y = self.calc_position(x, y, ratio)
  154.             size = random.randint(1, 2)
  155.             all_points.append((x, y, size))
  156.  
  157.         self.all_points[generate_frame] = all_points
  158.  
  159.     def render(self, render_canvas, render_frame):
  160.         for x, y, size in self.all_points[render_frame % self.generate_frame]:
  161.             render_canvas.create_rectangle(x, y, x + size, y + size, width=0, fill=HEART_COLOR)
  162.  
  163.  
  164. def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
  165.     render_canvas.delete('all')
  166.     render_heart.render(render_canvas, render_frame)
  167.     main.after(160, draw, main, render_canvas, render_heart, render_frame + 1)
  168.  
  169.  
  170. if __name__ == '__main__':
  171.     root = Tk()  # 一个Tk
  172.     canvas = Canvas(root, bg='black', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
  173.     canvas.pack()
  174.     heart = Heart()  # 心
  175.     draw(root, canvas, heart)  # 开始画画~
  176.     root.mainloop()

二、HTML

html的个人感觉更好，因为有浏览器就支持运行，py的后期得导出成exe才可以在没有环境设备运行，html手机电脑都可以的。

1.第一个

输出样例

调整

<title>canvas爱心</title>   这个canvas爱心字样随便调整可以自己编辑的名字之类的

代码如下

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

 

2.第二个html

输出示例

调整一样方式

代码如下（这是看这个博主的）：

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0033)http://junior-l.gitee.io/to-lili/ -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.     
  5.     <title>💗</title>
  6.     <style>
  7.         canvas {
  8.             position: absolute;
  9.             left: 0;
  10.             top: 0;
  11.             width: 100%;
  12.             height: 100%;
  13.             background-color: rgba(0, 0, 0, .2);
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.  
  19. <canvas id="heart" width="1920" height="947"></canvas>
  20. <script>
  21.     window.requestAnimationFrame =
  22.         window.__requestAnimationFrame ||
  23.         window.requestAnimationFrame ||
  24.         window.webkitRequestAnimationFrame ||
  25.         window.mozRequestAnimationFrame ||
  26.         window.oRequestAnimationFrame ||
  27.         window.msRequestAnimationFrame ||
  28.         (function () {
  29.             return function (callback, element) {
  30.                 var lastTime = element.__lastTime;
  31.                 if (lastTime === undefined) {
  32.                     lastTime = 0;
  33.                 }
  34.                 var currTime = Date.now();
  35.                 var timeToCall = Math.max(1, 33 - (currTime - lastTime));
  36.                 window.setTimeout(callback, timeToCall);
  37.                 element.__lastTime = currTime + timeToCall;
  38.             };
  39.         })();
  40.     window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));
  41.     var loaded = false;
  42.     var init = function () {
  43.         if (loaded) return;
  44.         loaded = true;
  45.         var mobile = window.isDevice;
  46.         var koef = mobile ? 0.5 : 1;
  47.         var canvas = document.getElementById('heart');
  48.         var ctx = canvas.getContext('2d');
  49.         var width = canvas.width = koef * innerWidth;
  50.         var height = canvas.height = koef * innerHeight;
  51.         var rand = Math.random;
  52.         ctx.fillStyle = "rgba(0,0,0,1)";
  53.         ctx.fillRect(0, 0, width, height);
  54.  
  55.         var heartPosition = function (rad) {
  56.             //return [Math.sin(rad), Math.cos(rad)];
  57.             return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];
  58.         };
  59.         var scaleAndTranslate = function (pos, sx, sy, dx, dy) {
  60.             return [dx + pos[0] * sx, dy + pos[1] * sy];
  61.         };
  62.  
  63.         window.addEventListener('resize', function () {
  64.             width = canvas.width = koef * innerWidth;
  65.             height = canvas.height = koef * innerHeight;
  66.             ctx.fillStyle = "rgba(0,0,0,1)";
  67.             ctx.fillRect(0, 0, width, height);
  68.         });
  69.  
  70.         var traceCount = mobile ? 20 : 50;
  71.         var pointsOrigin = [];
  72.         var i;
  73.         var dr = mobile ? 0.3 : 0.1;
  74.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));
  75.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));
  76.         for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));
  77.         var heartPointsCount = pointsOrigin.length;
  78.  
  79.         var targetPoints = [];
  80.         var pulse = function (kx, ky) {
  81.             for (i = 0; i < pointsOrigin.length; i++) {
  82.                 targetPoints[i] = [];
  83.                 targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;
  84.                 targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;
  85.             }
  86.         };
  87.  
  88.         var e = [];
  89.         for (i = 0; i < heartPointsCount; i++) {
  90.             var x = rand() * width;
  91.             var y = rand() * height;
  92.             e[i] = {
  93.                 vx: 0,
  94.                 vy: 0,
  95.                 R: 2,
  96.                 speed: rand() + 5,
  97.                 q: ~~(rand() * heartPointsCount),
  98.                 D: 2 * (i % 2) - 1,
  99.                 force: 0.2 * rand() + 0.7,
  100.                 f: "hsla(0," + ~~(40 * rand() + 60) + "%," + ~~(60 * rand() + 20) + "%,.3)",
  101.                 trace: []
  102.             };
  103.             for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};
  104.         }
  105.  
  106.         var config = {
  107.             traceK: 0.4,
  108.             timeDelta: 0.01
  109.         };
  110.  
  111.         var time = 0;
  112.         var loop = function () {
  113.             var n = -Math.cos(time);
  114.             pulse((1 + n) * .5, (1 + n) * .5);
  115.             time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;
  116.             ctx.fillStyle = "rgba(0,0,0,.1)";
  117.             ctx.fillRect(0, 0, width, height);
  118.             for (i = e.length; i--;) {
  119.                 var u = e[i];
  120.                 var q = targetPoints[u.q];
  121.                 var dx = u.trace[0].x - q[0];
  122.                 var dy = u.trace[0].y - q[1];
  123.                 var length = Math.sqrt(dx * dx + dy * dy);
  124.                 if (10 > length) {
  125.                     if (0.95 < rand()) {
  126.                         u.q = ~~(rand() * heartPointsCount);
  127.                     } else {
  128.                         if (0.99 < rand()) {
  129.                             u.D *= -1;
  130.                         }
  131.                         u.q += u.D;
  132.                         u.q %= heartPointsCount;
  133.                         if (0 > u.q) {
  134.                             u.q += heartPointsCount;
  135.                         }
  136.                     }
  137.                 }
  138.                 u.vx += -dx / length * u.speed;
  139.                 u.vy += -dy / length * u.speed;
  140.                 u.trace[0].x += u.vx;
  141.                 u.trace[0].y += u.vy;
  142.                 u.vx *= u.force;
  143.                 u.vy *= u.force;
  144.                 for (k = 0; k < u.trace.length - 1;) {
  145.                     var T = u.trace[k];
  146.                     var N = u.trace[++k];
  147.                     N.x -= config.traceK * (N.x - T.x);
  148.                     N.y -= config.traceK * (N.y - T.y);
  149.                 }
  150.                 ctx.fillStyle = u.f;
  151.                 for (k = 0; k < u.trace.length; k++) {
  152.                     ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);
  153.                 }
  154.             }
  155.             ctx.fillStyle = "rgba(255,255,255,1)";
  156.             for (i = u.trace.length + 13; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);
  157.  
  158.             window.requestAnimationFrame(loop, canvas);
  159.         };
  160.         loop();
  161.     };
  162.  
  163.     var s = document.readyState;
  164.     if (s === 'complete' || s === 'loaded' || s === 'interactive') init();
  165.     else document.addEventListener('DOMContentLoaded', init, false);
  166. </script>
  167.  
  168. </body></html>

3.第三个html

样子

 

备注

这个我个人感觉还是蛮好看的，值得注意的是，里面的字是也能动的，可以把♥瓜瓜♥改成你想要的字眼（代码里面ctrl+f 找瓜瓜字眼 替换即可），titile也同理

代码

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0046)https://httishere.gitee.io/notion/v4/love-name -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.     
  5.     <title>💗 Love you 💗 My Dear 瓜瓜💗</title>
  6.     <style type="text/css">
  7.       body {
  8.         margin: 0;
  9.         overflow: hidden;
  10.         background: #000;
  11.       }
  12.       canvas {
  13.         position: absolute;
  14.         width: 100%;
  15.         height: 100%;
  16.       }
  17.       #pinkboard {
  18.         animation: anim 1.5s ease-in-out infinite;
  19.         -webkit-animation: anim 1.5s ease-in-out infinite;
  20.         -o-animation: anim 1.5s ease-in-out infinite;
  21.         -moz-animation: anim 1.5s ease-in-out infinite;
  22.       }
  23.       @keyframes anim {
  24.         0% {
  25.           transform: scale(0.8);
  26.         }
  27.         25% {
  28.           transform: scale(0.7);
  29.         }
  30.         50% {
  31.           transform: scale(1);
  32.         }
  33.         75% {
  34.           transform: scale(0.7);
  35.         }
  36.         100% {
  37.           transform: scale(0.8);
  38.         }
  39.       }
  40.       @-webkit-keyframes anim {
  41.         0% {
  42.           -webkit-transform: scale(0.8);
  43.         }
  44.         25% {
  45.           -webkit-transform: scale(0.7);
  46.         }
  47.         50% {
  48.           -webkit-transform: scale(1);
  49.         }
  50.         75% {
  51.           -webkit-transform: scale(0.7);
  52.         }
  53.         100% {
  54.           -webkit-transform: scale(0.8);
  55.         }
  56.       }
  57.       @-o-keyframes anim {
  58.         0% {
  59.           -o-transform: scale(0.8);
  60.         }
  61.         25% {
  62.           -o-transform: scale(0.7);
  63.         }
  64.         50% {
  65.           -o-transform: scale(1);
  66.         }
  67.         75% {
  68.           -o-transform: scale(0.7);
  69.         }
  70.         100% {
  71.           -o-transform: scale(0.8);
  72.         }
  73.       }
  74.       @-moz-keyframes anim {
  75.         0% {
  76.           -moz-transform: scale(0.8);
  77.         }
  78.         25% {
  79.           -moz-transform: scale(0.7);
  80.         }
  81.         50% {
  82.           -moz-transform: scale(1);
  83.         }
  84.         75% {
  85.           -moz-transform: scale(0.7);
  86.         }
  87.         100% {
  88.           -moz-transform: scale(0.8);
  89.         }
  90.       }
  91.       #name {
  92.         position: absolute;
  93.         top: 50%;
  94.         left: 50%;
  95.         transform: translate(-50%, -50%);
  96.         margin-top: -20px;
  97.         font-size: 46px;
  98.         color: #ea80b0;
  99.       }
  100.     </style>
  101.   </head>
  102.   <body>
  103.     <canvas id="pinkboard" width="1920" height="947"></canvas>
  104.     <!-- <div id="name">瓜瓜💗 ❤️</div> -->
  105.     <canvas id="canvas" width="1920" height="947"></canvas>
  106.  
  107.     <script type="text/javascript">
  108.       const colors = [
  109.         "#eec996",
  110.         "#8fb7d3",
  111.         "#b7d4c6",
  112.         "#c3bedd",
  113.         "#f1d5e4",
  114.         "#cae1d3",
  115.         "#f3c89d",
  116.         "#d0b0c3",
  117.         "#819d53",
  118.         "#c99294",
  119.         "#cec884",
  120.         "#ff8e70",
  121.         "#e0a111",
  122.         "#fffdf6",
  123.         "#cbd7ac",
  124.         "#e8c6c0",
  125.         "#dc9898",
  126.         "#ecc8ba",
  127.       ]; //用来设置的颜色
  128.       var canvas = document.getElementById("canvas");
  129.       var ctx = canvas.getContext("2d");
  130.       let count = 1;
  131.  
  132.       var ww = window.innerWidth;
  133.       var wh = window.innerHeight;
  134.  
  135.       var hearts = [];
  136.  
  137.       function init() {
  138.         requestAnimationFrame(render);
  139.         canvas.width = ww;
  140.         canvas.height = wh;
  141.         for (var i = 0; i < 100; i++) {
  142.           hearts.push(new Heart());
  143.         }
  144.       }
  145.  
  146.       function Heart() {
  147.         this.x = Math.random() * ww;
  148.         this.y = Math.random() * wh;
  149.         this.opacity = Math.random() * 0.5 + 0.5;
  150.         this.vel = {
  151.           x: (Math.random() - 0.5) * 4,
  152.           y: (Math.random() - 0.5) * 4,
  153.         };
  154.         this.targetScale = Math.random() * 0.15 + 0.02;
  155.         this.scale = this.targetScale * Math.random();
  156.       }
  157.  
  158.       Heart.prototype.update = function (i) {
  159.         this.x += this.vel.x;
  160.         this.y += this.vel.y;
  161.  
  162.         this.scale += (this.targetScale - this.scale) * 0.01;
  163.         if (this.x - this.width > ww || this.x + this.width < 0) {
  164.           this.scale = 0;
  165.           this.x = Math.random() * ww;
  166.         }
  167.         if (this.y - this.height > wh || this.y + this.height < 0) {
  168.           this.scale = 0;
  169.           this.y = Math.random() * wh;
  170.         }
  171.         this.width = 473.8;
  172.         this.height = 408.6;
  173.       };
  174.       Heart.prototype.draw = function (i) {
  175.         ctx.globalAlpha = this.opacity;
  176.         ctx.font = `${180 * this.scale}px "微软雅黑"`;
  177.         // ctx.font="20px";
  178.         ctx.fillStyle = colors[i % 18];
  179.         ctx.fillText(
  180.           "💗瓜瓜💗",
  181.           this.x - this.width * 0.5,
  182.           this.y - this.height * 0.5,
  183.           this.width,
  184.           this.height
  185.         );
  186.         // ctx.drawImage(
  187.         //   heartImage,
  188.         //   this.x - this.width * 0.5,
  189.         //   this.y - this.height * 0.5,
  190.         //   this.width,
  191.         //   this.height
  192.         // );
  193.       };
  194.  
  195.       function render() {
  196.         ctx.clearRect(0, 0, ww, wh);
  197.         // ctx.globalAlpha = 1;
  198.         // ctx.fillStyle = "rgba(255,255,255,0.3)";
  199.         // ctx.fillRect(0, 0, ww, wh);
  200.         for (var i = 0; i < 100; i++) {
  201.           hearts[i].update(i);
  202.           hearts[i].draw(i);
  203.         }
  204.         requestAnimationFrame(render);
  205.       }
  206.       init();
  207.  
  208.       // var heartImage = new Image();
  209.       // heartImage.onload = init();
  210.       // heartImage.src =
  211.       //   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4=";
  212.  
  213.       window.addEventListener("resize", function () {
  214.         ww = window.innerWidth;
  215.         wh = window.innerHeight;
  216.       });
  217.     </script>
  218.     <script>
  219.       /*
  220.        * Settings
  221.        */
  222.       var settings = {
  223.         particles: {
  224.           length: 500, // maximum amount of particles
  225.           duration: 2, // particle duration in sec
  226.           velocity: 100, // particle velocity in pixels/sec
  227.           effect: -0.75, // play with this for a nice effect
  228.           size: 30, // particle size in pixels
  229.         },
  230.       };
  231.  
  232.       /*
  233.        * RequestAnimationFrame polyfill by Erik M?ller
  234.        */
  235.       (function () {
  236.         var b = 0;
  237.         var c = ["ms", "moz", "webkit", "o"];
  238.         for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
  239.           window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
  240.           window.cancelAnimationFrame =
  241.             window[c[a] + "CancelAnimationFrame"] ||
  242.             window[c[a] + "CancelRequestAnimationFrame"];
  243.         }
  244.         if (!window.requestAnimationFrame) {
  245.           window.requestAnimationFrame = function (h, e) {
  246.             var d = new Date().getTime();
  247.             var f = Math.max(0, 16 - (d - b));
  248.             var g = window.setTimeout(function () {
  249.               h(d + f);
  250.             }, f);
  251.             b = d + f;
  252.             return g;
  253.           };
  254.         }
  255.         if (!window.cancelAnimationFrame) {
  256.           window.cancelAnimationFrame = function (d) {
  257.             clearTimeout(d);
  258.           };
  259.         }
  260.       })();
  261.  
  262.       /*
  263.        * Point class
  264.        */
  265.       var Point = (function () {
  266.         function Point(x, y) {
  267.           this.x = typeof x !== "undefined" ? x : 0;
  268.           this.y = typeof y !== "undefined" ? y : 0;
  269.         }
  270.         Point.prototype.clone = function () {
  271.           return new Point(this.x, this.y);
  272.         };
  273.         Point.prototype.length = function (length) {
  274.           if (typeof length == "undefined")
  275.             return Math.sqrt(this.x * this.x + this.y * this.y);
  276.           this.normalize();
  277.           this.x *= length;
  278.           this.y *= length;
  279.           return this;
  280.         };
  281.         Point.prototype.normalize = function () {
  282.           var length = this.length();
  283.           this.x /= length;
  284.           this.y /= length;
  285.           return this;
  286.         };
  287.         return Point;
  288.       })();
  289.  
  290.       /*
  291.        * Particle class
  292.        */
  293.  
  294.       var Particle = (function () {
  295.         function Particle() {
  296.           this.position = new Point();
  297.           this.velocity = new Point();
  298.           this.acceleration = new Point();
  299.           this.age = 0;
  300.         }
  301.         Particle.prototype.initialize = function (x, y, dx, dy) {
  302.           this.position.x = x;
  303.           this.position.y = y;
  304.           this.velocity.x = dx;
  305.           this.velocity.y = dy;
  306.           this.acceleration.x = dx * settings.particles.effect;
  307.           this.acceleration.y = dy * settings.particles.effect;
  308.           this.age = 0;
  309.         };
  310.         Particle.prototype.update = function (deltaTime) {
  311.           this.position.x += this.velocity.x * deltaTime;
  312.           this.position.y += this.velocity.y * deltaTime;
  313.           this.velocity.x += this.acceleration.x * deltaTime;
  314.           this.velocity.y += this.acceleration.y * deltaTime;
  315.           this.age += deltaTime;
  316.         };
  317.         Particle.prototype.draw = function (context, image) {
  318.           function ease(t) {
  319.             return --t * t * t + 1;
  320.           }
  321.           var size = image.width * ease(this.age / settings.particles.duration);
  322.           context.globalAlpha = 1 - this.age / settings.particles.duration;
  323.           context.drawImage(
  324.             image,
  325.             this.position.x - size / 2,
  326.             this.position.y - size / 2,
  327.             size,
  328.             size
  329.           );
  330.         };
  331.         return Particle;
  332.       })();
  333.  
  334.       /*
  335.        * ParticlePool class
  336.        */
  337.       var ParticlePool = (function () {
  338.         var particles,
  339.           firstActive = 0,
  340.           firstFree = 0,
  341.           duration = settings.particles.duration;
  342.  
  343.         function ParticlePool(length) {
  344.           // create and populate particle pool
  345.           particles = new Array(length);
  346.           for (var i = 0; i < particles.length; i++)
  347.             particles[i] = new Particle();
  348.         }
  349.         ParticlePool.prototype.add = function (x, y, dx, dy) {
  350.           particles[firstFree].initialize(x, y, dx, dy);
  351.  
  352.           // handle circular queue
  353.           firstFree++;
  354.           if (firstFree == particles.length) firstFree = 0;
  355.           if (firstActive == firstFree) firstActive++;
  356.           if (firstActive == particles.length) firstActive = 0;
  357.         };
  358.         ParticlePool.prototype.update = function (deltaTime) {
  359.           var i;
  360.  
  361.           // update active particles
  362.           if (firstActive < firstFree) {
  363.             for (i = firstActive; i < firstFree; i++)
  364.               particles[i].update(deltaTime);
  365.           }
  366.           if (firstFree < firstActive) {
  367.             for (i = firstActive; i < particles.length; i++)
  368.               particles[i].update(deltaTime);
  369.             for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);
  370.           }
  371.  
  372.           // remove inactive particles
  373.           while (
  374.             particles[firstActive].age >= duration &&
  375.             firstActive != firstFree
  376.           ) {
  377.             firstActive++;
  378.             if (firstActive == particles.length) firstActive = 0;
  379.           }
  380.         };
  381.         ParticlePool.prototype.draw = function (context, image) {
  382.           // draw active particles
  383.           if (firstActive < firstFree) {
  384.             for (i = firstActive; i < firstFree; i++)
  385.               particles[i].draw(context, image);
  386.           }
  387.           if (firstFree < firstActive) {
  388.             for (i = firstActive; i < particles.length; i++)
  389.               particles[i].draw(context, image);
  390.             for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
  391.           }
  392.         };
  393.         return ParticlePool;
  394.       })();
  395.  
  396.       /*
  397.        * Putting it all together
  398.        */
  399.       (function (canvas) {
  400.         var context = canvas.getContext("2d"),
  401.           particles = new ParticlePool(settings.particles.length),
  402.           particleRate =
  403.             settings.particles.length / settings.particles.duration, // particles/sec
  404.           time;
  405.  
  406.         // get point on heart with -PI <= t <= PI
  407.         function pointOnHeart(t) {
  408.           return new Point(
  409.             160 * Math.pow(Math.sin(t), 3),
  410.             130 * Math.cos(t) -
  411.               50 * Math.cos(2 * t) -
  412.               20 * Math.cos(3 * t) -
  413.               10 * Math.cos(4 * t) +
  414.               25
  415.           );
  416.         }
  417.  
  418.         // creating the particle image using a dummy canvas
  419.         var image = (function () {
  420.           var canvas = document.createElement("canvas"),
  421.             context = canvas.getContext("2d");
  422.           canvas.width = settings.particles.size;
  423.           canvas.height = settings.particles.size;
  424.           // helper function to create the path
  425.           function to(t) {
  426.             var point = pointOnHeart(t);
  427.             point.x =
  428.               settings.particles.size / 2 +
  429.               (point.x * settings.particles.size) / 350;
  430.             point.y =
  431.               settings.particles.size / 2 -
  432.               (point.y * settings.particles.size) / 350;
  433.             return point;
  434.           }
  435.           // create the path
  436.           context.beginPath();
  437.           var t = -Math.PI;
  438.           var point = to(t);
  439.           context.moveTo(point.x, point.y);
  440.           while (t < Math.PI) {
  441.             t += 0.01; // baby steps!
  442.             point = to(t);
  443.             context.lineTo(point.x, point.y);
  444.           }
  445.           context.closePath();
  446.           // create the fill
  447.           context.fillStyle = "#ea80b0";
  448.           context.fill();
  449.           // create the image
  450.           var image = new Image();
  451.           image.src = canvas.toDataURL();
  452.           return image;
  453.         })();
  454.  
  455.         // render that thing!
  456.         function render() {
  457.           // next animation frame
  458.           requestAnimationFrame(render);
  459.  
  460.           // update time
  461.           var newTime = new Date().getTime() / 1000,
  462.             deltaTime = newTime - (time || newTime);
  463.           time = newTime;
  464.  
  465.           // clear canvas
  466.           context.clearRect(0, 0, canvas.width, canvas.height);
  467.  
  468.           // create new particles
  469.           var amount = particleRate * deltaTime;
  470.           for (var i = 0; i < amount; i++) {
  471.             var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  472.             var dir = pos.clone().length(settings.particles.velocity);
  473.             particles.add(
  474.               canvas.width / 2 + pos.x,
  475.               canvas.height / 2 - pos.y,
  476.               dir.x,
  477.               -dir.y
  478.             );
  479.           }
  480.  
  481.           // update and draw particles
  482.           particles.update(deltaTime);
  483.           particles.draw(context, image);
  484.         }
  485.  
  486.         // handle (re-)sizing of the canvas
  487.         function onResize() {
  488.           canvas.width = canvas.clientWidth;
  489.           canvas.height = canvas.clientHeight;
  490.         }
  491.         window.onresize = onResize;
  492.  
  493.         // delay rendering bootstrap
  494.         setTimeout(function () {
  495.           onResize();
  496.           render();
  497.         }, 10);
  498.       })(document.getElementById("pinkboard"));
  499.  
  500.       // 参考：https://blog.csdn.net/weixin_57038822/article/details/121644240
  501.     </script>
  502.   
  503.  
  504. </body></html>

3.第四个html

样例

 代码调整思路

x位置直接记事本打开ctrl+f 找亲爱的 编辑文案

然后对这行字的编辑（样式上）

是这个，改这里的信息就行哪个参数不会就搜一下他的作用 比如第一行是字体，你可以百度 比如这个，都是一样道理。

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  4. <head>
  5.     <title>LoveHTT</title>
  6. </head>
  7. <body> <canvas id="canvas"></canvas>
  8. <style type="text/css">
  9.     body {
  10.         margin: 0;
  11.         padding: 0;
  12.         overflow: hidden;
  13.     }
  14. </style>
  15. <script type="text/javascript">
  16.     var canvas = document.getElementById('canvas');
  17.     var ctx = canvas.getContext('2d');
  18.  
  19.  
  20.     canvas.height = window.innerHeight;
  21.     canvas.width = window.innerWidth;
  22.  
  23.     var texts = 'I LOVE U'.split('');
  24.  
  25.     var fontSize = 16;
  26.     var columns = canvas.width / fontSize;
  27.     // 用于计算输出文字时坐标，所以长度即为列数
  28.     var drops = [];
  29.     //初始值
  30.     for (var x = 0; x < columns; x++) {
  31.         drops[x] = 1;
  32.     }
  33.  
  34.     function draw() {
  35.         //让背景逐渐由透明到不透明
  36.         ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  37.         ctx.fillRect(0, 0, canvas.width, canvas.height);
  38.         //文字颜色
  39.         ctx.fillStyle = '#f584b7';
  40.         ctx.font = fontSize + 'px arial';
  41.         //逐行输出文字
  42.         for (var i = 0; i < drops.length; i++) {
  43.             var text = texts[Math.floor(Math.random() * texts.length)];
  44.             ctx.fillText(text, i * fontSize, drops[i] * fontSize);
  45.  
  46.             if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
  47.                 drops[i] = 0;
  48.             }
  49.  
  50.             drops[i]++;
  51.         }
  52.     }
  53.     setInterval(draw, 33);
  54. </script>
  55. </body>
  56. </html>
  57. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  58. <HTML>
  59. <HEAD>
  60.     <TITLE> love</TITLE>
  61. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  62.     <META NAME="Generator" CONTENT="EditPlus">
  63.     <META NAME="Author" CONTENT="">
  64.     <META NAME="Keywords" CONTENT="">
  65.     <META NAME="Description" CONTENT="">
  66.     <meta charset="UTF-8">
  67.     <style>
  68.         html, body {
  69.             height: 100%;
  70.             padding: 0;
  71.             margin: 0;
  72.             background: rgb(0, 0, 0);
  73.         }
  74.         canvas {
  75.             position: absolute;
  76.             width: 100%;
  77.             height: 100%;
  78.         }
  79.         #child{
  80.             position: fixed;
  81.             top:50%;
  82.             left: 50%;
  83.             margin-top: -75px;
  84.             margin-left:-100px ;
  85.  
  86.         }
  87.  
  88.         h4{font-family:"STKaiti";
  89.              font-size: 40px;
  90.              color:#f584b7;
  91.              position: relative;
  92.              top: -70px;left: -65px;}
  93.     </style>
  94. </head>
  95. <body>
  96. <div id="child" ><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->
  97.   <canvas id ="pinkboard"></canvas>
  98.   <!-- <canvas id= "canvas"></canvas>  -->
  99. <script>
  100.     /*
  101.    * Settings
  102.    */
  103.     var settings = {
  104.         particles: {
  105.             length:   500, // maximum amount of particles
  106.             duration:   2, // particle duration in sec
  107.             velocity: 100, // particle velocity in pixels/sec
  108.             effect: -0.75, // play with this for a nice effect
  109.             size:      30, // particle size in pixels
  110.         },
  111.     };
  112.  
  113.     /*
  114.      * RequestAnimationFrame polyfill by Erik Möller
  115.      */
  116.     (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)}}}());
  117.  
  118.     /*
  119.      * Point class
  120.      */
  121.     var Point = (function() {
  122.         function Point(x, y) {
  123.             this.x = (typeof x !== 'undefined') ? x : 0;
  124.             this.y = (typeof y !== 'undefined') ? y : 0;
  125.         }
  126.         Point.prototype.clone = function() {
  127.             return new Point(this.x, this.y);
  128.         };
  129.         Point.prototype.length = function(length) {
  130.             if (typeof length == 'undefined')
  131.                 return Math.sqrt(this.x * this.x + this.y * this.y);
  132.             this.normalize();
  133.             this.x *= length;
  134.             this.y *= length;
  135.             return this;
  136.         };
  137.         Point.prototype.normalize = function() {
  138.             var length = this.length();
  139.             this.x /= length;
  140.             this.y /= length;
  141.             return this;
  142.         };
  143.         return Point;
  144.     })();
  145.  
  146.     /*
  147.      * Particle class
  148.      */
  149.     var Particle = (function() {
  150.         function Particle() {
  151.             this.position = new Point();
  152.             this.velocity = new Point();
  153.             this.acceleration = new Point();
  154.             this.age = 0;
  155.         }
  156.         Particle.prototype.initialize = function(x, y, dx, dy) {
  157.             this.position.x = x;
  158.             this.position.y = y;
  159.             this.velocity.x = dx;
  160.             this.velocity.y = dy;
  161.             this.acceleration.x = dx * settings.particles.effect;
  162.             this.acceleration.y = dy * settings.particles.effect;
  163.             this.age = 0;
  164.         };
  165.         Particle.prototype.update = function(deltaTime) {
  166.             this.position.x += this.velocity.x * deltaTime;
  167.             this.position.y += this.velocity.y * deltaTime;
  168.             this.velocity.x += this.acceleration.x * deltaTime;
  169.             this.velocity.y += this.acceleration.y * deltaTime;
  170.             this.age += deltaTime;
  171.         };
  172.         Particle.prototype.draw = function(context, image) {
  173.             function ease(t) {
  174.                 return (--t) * t * t + 1;
  175.             }
  176.             var size = image.width * ease(this.age / settings.particles.duration);
  177.             context.globalAlpha = 1 - this.age / settings.particles.duration;
  178.             context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  179.         };
  180.         return Particle;
  181.     })();
  182.  
  183.     /*
  184.      * ParticlePool class
  185.      */
  186.     var ParticlePool = (function() {
  187.         var particles,
  188.             firstActive = 0,
  189.             firstFree   = 0,
  190.             duration    = settings.particles.duration;
  191.  
  192.         function ParticlePool(length) {
  193.             // create and populate particle pool
  194.             particles = new Array(length);
  195.             for (var i = 0; i < particles.length; i++)
  196.                 particles[i] = new Particle();
  197.         }
  198.         ParticlePool.prototype.add = function(x, y, dx, dy) {
  199.             particles[firstFree].initialize(x, y, dx, dy);
  200.  
  201.             // handle circular queue
  202.             firstFree++;
  203.             if (firstFree   == particles.length) firstFree   = 0;
  204.             if (firstActive == firstFree       ) firstActive++;
  205.             if (firstActive == particles.length) firstActive = 0;
  206.         };
  207.         ParticlePool.prototype.update = function(deltaTime) {
  208.             var i;
  209.  
  210.             // update active particles
  211.             if (firstActive < firstFree) {
  212.                 for (i = firstActive; i < firstFree; i++)
  213.                     particles[i].update(deltaTime);
  214.             }
  215.             if (firstFree < firstActive) {
  216.                 for (i = firstActive; i < particles.length; i++)
  217.                     particles[i].update(deltaTime);
  218.                 for (i = 0; i < firstFree; i++)
  219.                     particles[i].update(deltaTime);
  220.             }
  221.  
  222.             // remove inactive particles
  223.             while (particles[firstActive].age >= duration && firstActive != firstFree) {
  224.                 firstActive++;
  225.                 if (firstActive == particles.length) firstActive = 0;
  226.             }
  227.  
  228.  
  229.         };
  230.         ParticlePool.prototype.draw = function(context, image) {
  231.             // draw active particles
  232.             if (firstActive < firstFree) {
  233.                 for (i = firstActive; i < firstFree; i++)
  234.                     particles[i].draw(context, image);
  235.             }
  236.             if (firstFree < firstActive) {
  237.                 for (i = firstActive; i < particles.length; i++)
  238.                     particles[i].draw(context, image);
  239.                 for (i = 0; i < firstFree; i++)
  240.                     particles[i].draw(context, image);
  241.             }
  242.         };
  243.         return ParticlePool;
  244.     })();
  245.  
  246.     /*
  247.      * Putting it all together
  248.      */
  249.     (function(canvas) {
  250.         var context = canvas.getContext('2d'),
  251.             particles = new ParticlePool(settings.particles.length),
  252.             particleRate = settings.particles.length / settings.particles.duration, // particles/sec
  253.             time;
  254.  
  255.         // get point on heart with -PI <= t <= PI
  256.         function pointOnHeart(t) {
  257.             return new Point(
  258.                 160 * Math.pow(Math.sin(t), 3),
  259.                 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
  260.             );
  261.         }
  262.  
  263.         // creating the particle image using a dummy canvas
  264.         var image = (function() {
  265.             var canvas  = document.createElement('canvas'),
  266.                 context = canvas.getContext('2d');
  267.             canvas.width  = settings.particles.size;
  268.             canvas.height = settings.particles.size;
  269.             // helper function to create the path
  270.             function to(t) {
  271.                 var point = pointOnHeart(t);
  272.                 point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
  273.                 point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
  274.                 return point;
  275.             }
  276.             // create the path
  277.             context.beginPath();
  278.             var t = -Math.PI;
  279.             var point = to(t);
  280.             context.moveTo(point.x, point.y);
  281.             while (t < Math.PI) {
  282.                 t += 0.01; // baby steps!
  283.                 point = to(t);
  284.                 context.lineTo(point.x, point.y);
  285.             }
  286.             context.closePath();
  287.             // create the fill
  288.             context.fillStyle = '#ea80b0';
  289.             context.fill();
  290.             // create the image
  291.             var image = new Image();
  292.             image.src = canvas.toDataURL();
  293.             return image;
  294.         })();
  295.  
  296.         // render that thing!
  297.         function render() {
  298.             // next animation frame
  299.             requestAnimationFrame(render);
  300.  
  301.             // update time
  302.             var newTime   = new Date().getTime() / 1000,
  303.                 deltaTime = newTime - (time || newTime);
  304.             time = newTime;
  305.  
  306.             // clear canvas
  307.             context.clearRect(0, 0, canvas.width, canvas.height);
  308.  
  309.             // create new particles
  310.             var amount = particleRate * deltaTime;
  311.             for (var i = 0; i < amount; i++) {
  312.                 var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  313.                 var dir = pos.clone().length(settings.particles.velocity);
  314.                 particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
  315.             }
  316.  
  317.             // update and draw particles
  318.             particles.update(deltaTime);
  319.             particles.draw(context, image);
  320.         }
  321.  
  322.         // handle (re-)sizing of the canvas
  323.         function onResize() {
  324.             canvas.width  = canvas.clientWidth;
  325.             canvas.height = canvas.clientHeight;
  326.         }
  327.         window.onresize = onResize;
  328.  
  329.         // delay rendering bootstrap
  330.         setTimeout(function() {
  331.             onResize();
  332.             render();
  333.         }, 10);
  334.     })(document.getElementById('pinkboard'));
  335. 	
  336. 	
  337. 	
  338. 	
  339. </script>
  340.  
  341. </BODY>
  342.  <!--                           
  343. <audio controls>
  344.   <source src="Alan Walker-Faded.mp3" type="audio/ogg">
  345.   <source src="Alan Walker-Faded.mp3" type="audio/mpeg">
  346. </audio >
  348.      -->
  349.  
  350. 		
  351. </HTML>

总结

本文简单介绍了几种爱心代码，希望对大家有所帮助，求赞欧~~~
另外，python想送给你的那个 TA的话可以打包为exe的，我后期再补一下教程，然后运行有问题的可以在评论区说明~

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发