• 最新的爱心代码已就绪 发射成功 速来领取啦

     哈喽，大家好，我是木易巷！

    爱情，是每个人都在追求的东西。身为一个IT行业人士，我也会追求爱情，我也会像心爱的人表达感情，只是我所表达的方式与他人有所不同。我的主要战场在计算机上，所以我就想到了用计算机来表达感情，在网页上做爱心，还是会动的爱心给她~

    这次给大家带来炫酷的跳动爱心，有三种效果，大家自行领取~

    目录

    第一种效果图

                            代码部分

    第二种效果图

                            代码部分

    第三种效果图

                            代码部分

    上一篇的三个爱心：https://blog.csdn.net/qq_44794321/article/details/127719490icon-default.png?t=M85Bhttps://blog.csdn.net/qq_44794321/article/details/127719490

    第一种效果图：

    代码部分

    代码如下仅供参考，可以直接拿去复制粘贴！

    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
    8. CANVAS_CENTER_Y = CANVAS_HEIGHT / 2
    9. IMAGE_ENLARGE = 11
    10. HEART_COLOR = "#FF99CC"
    11. def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
    12.     x = 16 * (sin(t) ** 3)
    13.     y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))
    14.     # 放大
    15.     x *= shrink_ratio
    16.     y *= shrink_ratio
    17.     # 移到画布中央
    18.     x += CANVAS_CENTER_X
    19.     y += CANVAS_CENTER_Y
    20.     return int(x), int(y)
    21. def scatter_inside(x, y, beta=0.15):
    22.     ratio_x = - beta * log(random.random())
    23.     ratio_y = - beta * log(random.random())
    24.     dx = ratio_x * (x - CANVAS_CENTER_X)
    25.     dy = ratio_y * (y - CANVAS_CENTER_Y)
    26.     return x - dx, y - dy
    27. def shrink(x, y, ratio):
    28.     force = -1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.6)
    29.     dx = ratio * force * (x - CANVAS_CENTER_X)
    30.     dy = ratio * force * (y - CANVAS_CENTER_Y)
    31.     return x - dx, y - dy
    32. def curve(p):
    33.     return 2 * (2 * sin(4 * p)) / (2 * pi)
    34. class Heart:
    35.     def __init__(self, generate_frame=20):
    36.         self._points = set()  # 原始爱心坐标集合
    37.         self._edge_diffusion_points = set()  # 边缘扩散效果点坐标集合
    38.         self._center_diffusion_points = set()  # 中心扩散效果点坐标集合
    39.         self.all_points = {}  # 每帧动态点坐标
    40.         self.build(2000)
    41.         self.random_halo = 1000
    42.         self.generate_frame = generate_frame
    43.         for frame in range(generate_frame):
    44.             self.calc(frame)
    45.     def build(self, number):
    46.         for _ in range(number):
    47.             t = random.uniform(0, 2 * pi)
    48.             x, y = heart_function(t)
    49.             self._points.add((x, y))
    50.         # 爱心内扩散
    51.         for _x, _y in list(self._points):
    52.             for _ in range(3):
    53.                 x, y = scatter_inside(_x, _y, 0.05)
    54.                 self._edge_diffusion_points.add((x, y))
    55.         # 爱心内再次扩散
    56.         point_list = list(self._points)
    57.         for _ in range(4000):
    58.             x, y = random.choice(point_list)
    59.             x, y = scatter_inside(x, y, 0.17)
    60.             self._center_diffusion_points.add((x, y))
    61.     @staticmethod
    62.     def calc_position(x, y, ratio):
    63.         force = 1 / (((x - CANVAS_CENTER_X) ** 2 + (y - CANVAS_CENTER_Y) ** 2) ** 0.520)
    64.         dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
    65.         dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)
    66.         return x - dx, y - dy
    67.     def calc(self, generate_frame):
    68.         ratio = 10 * curve(generate_frame / 10 * pi)
    69.         halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
    70.         halo_number = int(3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))
    71.         all_points = []
    72.         # 光环
    73.         heart_halo_point = set()
    74.         for _ in range(halo_number):
    75.             t = random.uniform(0, 2 * pi)
    76.             x, y = heart_function(t, shrink_ratio=11.6)
    77.             x, y = shrink(x, y, halo_radius)
    78.             if (x, y) not in heart_halo_point:
    79.                 heart_halo_point.add((x, y))
    80.                 x += random.randint(-14, 14)
    81.                 y += random.randint(-14, 14)
    82.                 size = random.choice((1, 2, 2))
    83.                 all_points.append((x, y, size))
    84.         # 轮廓
    85.         for x, y in self._points:
    86.             x, y = self.calc_position(x, y, ratio)
    87.             size = random.randint(1, 3)
    88.             all_points.append((x, y, size))
    89.         # 内容
    90.         for x, y in self._edge_diffusion_points:
    91.             x, y = self.calc_position(x, y, ratio)
    92.             size = random.randint(1, 2)
    93.             all_points.append((x, y, size))
    94.         for x, y in self._center_diffusion_points:
    95.             x, y = self.calc_position(x, y, ratio)
    96.             size = random.randint(1, 2)
    97.             all_points.append((x, y, size))
    98.         self.all_points[generate_frame] = all_points
    99.     def render(self, render_canvas, render_frame):
    100.         for x, y, size in self.all_points[render_frame % self.generate_frame]:
    101.             render_canvas.create_rectangle(x, y, x + size, y + size, width=0, fill=HEART_COLOR)
    102. def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
    103.     render_canvas.delete('all')
    104.     render_heart.render(render_canvas, render_frame)
    105.     main.after(160, draw, main, render_canvas, render_heart, render_frame + 1)
    106. if __name__ == '__main__':
    107.     root = Tk()
    108.     canvas = Canvas(root, bg='black', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
    109.     canvas.pack()
    110.     heart = Heart()
    111.     draw(root, canvas, heart)
    112.     root.title("公众号：木易巷")
    113.     root.mainloop()
    114.

    第二种效果图：

    代码部分

    代码如下仅供参考，可以直接拿去复制粘贴！

    1. HTML>
    3. html PUBLIC "" ""><HTML><HEAD><META content="IE=11.0000" 
    4. http-equiv="X-UA-Compatible">
    5.      
    6. <META charset="utf-8">     <TITLE>木易巷TITLE>     
    7. <STYLE type="text/css">
    8.       body {
    9.         margin: 0;
    10.         overflow: hidden;
    11.         background: #000;
    12.       }
    13.       canvas {
    14.         position: absolute;
    15.         width: 100%;
    16.         height: 100%;
    17.       }
    18.       #pinkboard {
    19.         animation: anim 1.5s ease-in-out infinite;
    20.         -webkit-animation: anim 1.5s ease-in-out infinite;
    21.         -o-animation: anim 1.5s ease-in-out infinite;
    22.         -moz-animation: anim 1.5s ease-in-out infinite;
    23.       }
    24.       @keyframes anim {
    25.         0% {
    26.           transform: scale(0.8);
    27.         }
    28.         25% {
    29.           transform: scale(0.7);
    30.         }
    31.         50% {
    32.           transform: scale(1);
    33.         }
    34.         75% {
    35.           transform: scale(0.7);
    36.         }
    37.         100% {
    38.           transform: scale(0.8);
    39.         }
    40.       }
    41.       @-webkit-keyframes anim {
    42.         0% {
    43.           -webkit-transform: scale(0.8);
    44.         }
    45.         25% {
    46.           -webkit-transform: scale(0.7);
    47.         }
    48.         50% {
    49.           -webkit-transform: scale(1);
    50.         }
    51.         75% {
    52.           -webkit-transform: scale(0.7);
    53.         }
    54.         100% {
    55.           -webkit-transform: scale(0.8);
    56.         }
    57.       }
    58.       @-o-keyframes anim {
    59.         0% {
    60.           -o-transform: scale(0.8);
    61.         }
    62.         25% {
    63.           -o-transform: scale(0.7);
    64.         }
    65.         50% {
    66.           -o-transform: scale(1);
    67.         }
    68.         75% {
    69.           -o-transform: scale(0.7);
    70.         }
    71.         100% {
    72.           -o-transform: scale(0.8);
    73.         }
    74.       }
    75.       @-moz-keyframes anim {
    76.         0% {
    77.           -moz-transform: scale(0.8);
    78.         }
    79.         25% {
    80.           -moz-transform: scale(0.7);
    81.         }
    82.         50% {
    83.           -moz-transform: scale(1);
    84.         }
    85.         75% {
    86.           -moz-transform: scale(0.7);
    87.         }
    88.         100% {
    89.           -moz-transform: scale(0.8);
    90.         }
    91.       }
    92.       #name {
    93.         position: absolute;
    94.         top: 50%;
    95.         left: 50%;
    96.         transform: translate(-50%, -50%);
    97.         margin-top: -20px;
    98.         font-size: 46px;
    99.         color: #ea80b0;
    100.       }
    101.     STYLE>
    102.    
    103. <META name="GENERATOR" content="MSHTML 11.00.10570.1001">HEAD>   
    104. <BODY><CANVAS id="pinkboard">CANVAS>       
    105.    <CANVAS id="canvas">CANVAS>     
    106. <SCRIPT type="text/javascript">
    107.       const colors = [
    108.         "#eec996",
    109.         "#8fb7d3",
    110.         "#b7d4c6",
    111.         "#c3bedd",
    112.         "#f1d5e4",
    113.         "#cae1d3",
    114.         "#f3c89d",
    115.         "#d0b0c3",
    116.         "#819d53",
    117.         "#c99294",
    118.         "#cec884",
    119.         "#ff8e70",
    120.         "#e0a111",
    121.         "#fffdf6",
    122.         "#cbd7ac",
    123.         "#e8c6c0",
    124.         "#dc9898",
    125.         "#ecc8ba",
    126.       ]; //用来设置的颜色
    127.       var canvas = document.getElementById("canvas");
    128.       var ctx = canvas.getContext("2d");
    129.       let count = 1;
    130.  
    131.       var ww = window.innerWidth;
    132.       var wh = window.innerHeight;
    133.  
    134.       var hearts = [];
    135.  
    136.       function init() {
    137.         requestAnimationFrame(render);
    138.         canvas.width = ww;
    139.         canvas.height = wh;
    140.         for (var i = 0; i < 100; i++) {
    141.           hearts.push(new Heart());
    142.         }
    143.       }
    144.  
    145.       function Heart() {
    146.         this.x = Math.random() * ww;
    147.         this.y = Math.random() * wh;
    148.         this.opacity = Math.random() * 0.5 + 0.5;
    149.         this.vel = {
    150.           x: (Math.random() - 0.5) * 4,
    151.           y: (Math.random() - 0.5) * 4,
    152.         };
    153.         this.targetScale = Math.random() * 0.15 + 0.02;
    154.         this.scale = this.targetScale * Math.random();
    155.       }
    156.  
    157.       Heart.prototype.update = function (i) {
    158.         this.x += this.vel.x;
    159.         this.y += this.vel.y;
    160.  
    161.         this.scale += (this.targetScale - this.scale) * 0.01;
    162.         if (this.x - this.width > ww || this.x + this.width < 0) {
    163.           this.scale = 0;
    164.           this.x = Math.random() * ww;
    165.         }
    166.         if (this.y - this.height > wh || this.y + this.height < 0) {
    167.           this.scale = 0;
    168.           this.y = Math.random() * wh;
    169.         }
    170.         this.width = 473.8;
    171.         this.height = 408.6;
    172.       };
    173.       Heart.prototype.draw = function (i) {
    174.         ctx.globalAlpha = this.opacity;
    175.         ctx.font = `${180 * this.scale}px "微软雅黑"`;
    176.         // ctx.font="20px";
    177.         ctx.fillStyle = colors[i % 18];
    178.         ctx.fillText(
    179.           "木易巷",
    180.           this.x - this.width * 0.5,
    181.           this.y - this.height * 0.5,
    182.           this.width,
    183.           this.height
    184.         );
    185.         // ctx.drawImage(
    186.         //   heartImage,
    187.         //   this.x - this.width * 0.5,
    188.         //   this.y - this.height * 0.5,
    189.         //   this.width,
    190.         //   this.height
    191.         // );
    192.       };
    193.  
    194.       function render() {
    195.         ctx.clearRect(0, 0, ww, wh);
    196.         // ctx.globalAlpha = 1;
    197.         // ctx.fillStyle = "rgba(255,255,255,0.3)";
    198.         // ctx.fillRect(0, 0, ww, wh);
    199.         for (var i = 0; i < 100; i++) {
    200.           hearts[i].update(i);
    201.           hearts[i].draw(i);
    202.         }
    203.         requestAnimationFrame(render);
    204.       }
    205.       init();
    206.  
    207.       // var heartImage = new Image();
    208.       // heartImage.onload = init();
    209.       // heartImage.src =
    210.       //   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4=";
    211.  
    212.       window.addEventListener("resize", function () {
    213.         ww = window.innerWidth;
    214.         wh = window.innerHeight;
    215.       });
    216.     SCRIPT>
    217.      
    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 = "#B22222";
    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.     SCRIPT>
    500.    BODY>HTML>

    第三种效果图：

    代码部分

     

    代码如下仅供参考，可以直接拿去复制粘贴！

    1. HTML>
    2. html PUBLIC "" "">
    3. <HTML>
    4. <HEAD>
    5.     <META content="IE=11.0000"
    6.           http-equiv="X-UA-Compatible">
    7.  
    8.     <META charset="utf-8">
    9.     <TITLE>木易巷TITLE>
    10.     <STYLE type="text/css">
    11.         body {
    12.             margin: 0;
    13.             overflow: hidden;
    14.             background: #000;
    15.         }
    16.  
    17.         canvas {
    18.             position: absolute;
    19.             width: 100%;
    20.             height: 100%;
    21.         }
    22.  
    23.         #pinkboard {
    24.             animation: anim 1.5s ease-in-out infinite;
    25.             -webkit-animation: anim 1.5s ease-in-out infinite;
    26.             -o-animation: anim 1.5s ease-in-out infinite;
    27.             -moz-animation: anim 1.5s ease-in-out infinite;
    28.         }
    29.  
    30.         @keyframes anim {
    31.             0% {
    32.                 transform: scale(0.8);
    33.             }
    34.             25% {
    35.                 transform: scale(0.7);
    36.             }
    37.             50% {
    38.                 transform: scale(1);
    39.             }
    40.             75% {
    41.                 transform: scale(0.7);
    42.             }
    43.             100% {
    44.                 transform: scale(0.8);
    45.             }
    46.         }
    47.  
    48.         @-webkit-keyframes anim {
    49.             0% {
    50.                 -webkit-transform: scale(0.8);
    51.             }
    52.             25% {
    53.                 -webkit-transform: scale(0.7);
    54.             }
    55.             50% {
    56.                 -webkit-transform: scale(1);
    57.             }
    58.             75% {
    59.                 -webkit-transform: scale(0.7);
    60.             }
    61.             100% {
    62.                 -webkit-transform: scale(0.8);
    63.             }
    64.         }
    65.  
    66.         @-o-keyframes anim {
    67.             0% {
    68.                 -o-transform: scale(0.8);
    69.             }
    70.             25% {
    71.                 -o-transform: scale(0.7);
    72.             }
    73.             50% {
    74.                 -o-transform: scale(1);
    75.             }
    76.             75% {
    77.                 -o-transform: scale(0.7);
    78.             }
    79.             100% {
    80.                 -o-transform: scale(0.8);
    81.             }
    82.         }
    83.  
    84.         @-moz-keyframes anim {
    85.             0% {
    86.                 -moz-transform: scale(0.8);
    87.             }
    88.             25% {
    89.                 -moz-transform: scale(0.7);
    90.             }
    91.             50% {
    92.                 -moz-transform: scale(1);
    93.             }
    94.             75% {
    95.                 -moz-transform: scale(0.7);
    96.             }
    97.             100% {
    98.                 -moz-transform: scale(0.8);
    99.             }
    100.         }
    101.  
    102.         #name {
    103.             position: absolute;
    104.             top: 50%;
    105.             left: 50%;
    106.             transform: translate(-50%, -50%);
    107.             margin-top: -20px;
    108.             font-size: 46px;
    109.             color: #ea80b0;
    110.         }
    111.     STYLE>
    112.  
    113.     <META name="GENERATOR" content="MSHTML 11.00.10570.1001">
    114. HEAD>
    115. <BODY>
    116.  
    117.  
    119. <CANVAS id="pinkboard">CANVAS>
    120.  
    121.  
    124.  
    125.  
    126. <SCRIPT>
    127.     const colors = [
    128.         "#eec996",
    129.         "#8fb7d3",
    130.         "#b7d4c6",
    131.         "#c3bedd",
    132.         "#f1d5e4",
    133.         "#cae1d3",
    134.         "#f3c89d",
    135.         "#d0b0c3",
    136.         "#819d53",
    137.         "#c99294",
    138.         "#cec884",
    139.         "#ff8e70",
    140.         "#e0a111",
    141.         "#fffdf6",
    142.         "#cbd7ac",
    143.         "#e8c6c0",
    144.         "#dc9898",
    145.         "#ecc8ba",
    146.     ]; //用来设置的颜色
    147.     var canvas = document.getElementById("canvas");
    148.     var ctx = canvas.getContext("2d");
    149.     let count = 1;
    150.  
    151.     var ww = window.innerWidth;
    152.     var wh = window.innerHeight;
    153.  
    154.     var hearts = [];
    155.  
    156.     function init() {
    157.         requestAnimationFrame(render);
    158.         canvas.width = ww;
    159.         canvas.height = wh;
    160.         for (var i = 0; i < 100; i++) {
    161.             hearts.push(new Heart());
    162.         }
    163.     }
    164.  
    165.     function Heart() {
    166.         this.x = Math.random() * ww;
    167.         this.y = Math.random() * wh;
    168.         this.opacity = Math.random() * 0.5 + 0.5;
    169.         this.vel = {
    170.             x: (Math.random() - 0.5) * 4,
    171.             y: (Math.random() - 0.5) * 4,
    172.         };
    173.         this.targetScale = Math.random() * 0.15 + 0.02;
    174.         this.scale = this.targetScale * Math.random();
    175.     }
    176.  
    177.     Heart.prototype.update = function (i) {
    178.         this.x += this.vel.x;
    179.         this.y += this.vel.y;
    180.  
    181.         this.scale += (this.targetScale - this.scale) * 0.01;
    182.         if (this.x - this.width > ww || this.x + this.width < 0) {
    183.             this.scale = 0;
    184.             this.x = Math.random() * ww;
    185.         }
    186.         if (this.y - this.height > wh || this.y + this.height < 0) {
    187.             this.scale = 0;
    188.             this.y = Math.random() * wh;
    189.         }
    190.         this.width = 473.8;
    191.         this.height = 408.6;
    192.     };
    193.     Heart.prototype.draw = function (i) {
    194.         ctx.globalAlpha = this.opacity;
    195.         ctx.font = `${180 * this.scale}px "微软雅黑"`;
    196.         // ctx.font="20px";
    197.         ctx.fillStyle = colors[i % 18];
    198.         ctx.fillText(
    199.             "木易巷",
    200.             this.x - this.width * 0.5,
    201.             this.y - this.height * 0.5,
    202.             this.width,
    203.             this.height
    204.         );
    205.         // ctx.drawImage(
    206.         //   heartImage,
    207.         //   this.x - this.width * 0.5,
    208.         //   this.y - this.height * 0.5,
    209.         //   this.width,
    210.         //   this.height
    211.         // );
    212.     };
    213.  
    214.     function render() {
    215.         ctx.clearRect(0, 0, ww, wh);
    216.         // ctx.globalAlpha = 1;
    217.         // ctx.fillStyle = "rgba(255,255,255,0.3)";
    218.         // ctx.fillRect(0, 0, ww, wh);
    219.         for (var i = 0; i < 100; i++) {
    220.             hearts[i].update(i);
    221.             hearts[i].draw(i);
    222.         }
    223.         requestAnimationFrame(render);
    224.     }
    225.  
    226.     init();
    227.  
    228.     // var heartImage = new Image();
    229.     // heartImage.onload = init();
    230.     // heartImage.src =
    231.     //   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NzMuOHB4IiBoZWlnaHQ9IjQwOC42cHgiIHZpZXdCb3g9IjAgMCA0NzMuOCA0MDguNiI+PHBhdGggZmlsbD0iI2QzMjkzMiIgZD0iTTQwNC42LDE2LjZDMzg1LjQsNi4xLDM2My41LDAsMzQwLDBjLTQxLjUsMC03OC41LDE4LjktMTAzLDQ4LjVDMjEyLjMsMTguOSwxNzUuMywwLDEzMy44LDAgYy0yMy4zLDAtNDUuMyw2LjEtNjQuNSwxNi42QzI3LjksMzkuNSwwLDgzLjQsMCwxMzMuOWMwLDE0LjQsMi40LDI4LjMsNi42LDQxLjJDMjkuNiwyNzguNCwyMzcsNDA4LjYsMjM3LDQwOC42IHMyMDcuMi0xMzAuMiwyMzAuMi0yMzMuNWM0LjMtMTIuOSw2LjYtMjYuOCw2LjYtNDEuMkM0NzMuOCw4My40LDQ0NS45LDM5LjYsNDA0LjYsMTYuNnoiLz48L3N2Zz4=";
    232.  
    233.     window.addEventListener("resize", function () {
    234.         ww = window.innerWidth;
    235.         wh = window.innerHeight;
    236.     });
    237. SCRIPT>
    238.  
    239. <SCRIPT>
    240.     /*
    241.      * Settings
    242.      */
    243.     var settings = {
    244.         particles: {
    245.             length: 500, // maximum amount of particles-最大颗粒量
    246.             duration: 2, // particle duration in sec-粒子持续时间(秒)
    247.             velocity: 100, // particle velocity in pixels/sec-粒子速度(像素/秒)
    248.             effect: -0.75, // play with this for a nice effect-玩这个会有很好的效果
    249.             size: 30, // particle size in pixels-颗粒尺寸(像素)
    250.         },
    251.     };
    252.  
    253.     /*
    254.      * RequestAnimationFrame polyfill
    255.      * 请求动画帧多边形填充，立即执行函数，当解析到这一行，代码立即执行，后面的括号可以传递参数
    256.      */
    257.     (function () {
    258.         var b = 0;
    259.         var c = ["ms", "moz", "webkit", "o"];
    260.         for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {
    261.             window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];
    262.             window.cancelAnimationFrame =
    263.                 window[c[a] + "CancelAnimationFrame"] ||
    264.                 window[c[a] + "CancelRequestAnimationFrame"];
    265.         }
    266.         if (!window.requestAnimationFrame) {
    267.             window.requestAnimationFrame = function (h, e) {
    268.                 var d = new Date().getTime();
    269.                 var f = Math.max(0, 16 - (d - b));
    270.                 var g = window.setTimeout(function () {
    271.                     h(d + f);
    272.                 }, f);
    273.                 b = d + f;
    274.                 return g;
    275.             };
    276.         }
    277.         if (!window.cancelAnimationFrame) {
    278.             window.cancelAnimationFrame = function (d) {
    279.                 clearTimeout(d);
    280.             };
    281.         }
    282.     })();
    283.  
    284.     /*
    285.      * Point class
    286.      * 像素点的类，prototype可以给类中添加方法
    287.      */
    288.     var Point = (function () {
    289.         function Point(x, y) {
    290.             this.x = typeof x !== "undefined" ? x : 0;
    291.             this.y = typeof y !== "undefined" ? y : 0;
    292.         }
    293.  
    294.         Point.prototype.clone = function () {
    295.             return new Point(this.x, this.y);
    296.         };
    297.         Point.prototype.length = function (length) {
    298.             if (typeof length == "undefined")
    299.                 return Math.sqrt(this.x * this.x + this.y * this.y);
    300.             this.normalize();
    301.             this.x *= length;
    302.             this.y *= length;
    303.             return this;
    304.         };
    305.         Point.prototype.normalize = function () {
    306.             var length = this.length();
    307.             this.x /= length;
    308.             this.y /= length;
    309.             return this;
    310.         };
    311.         return Point;
    312.     })();
    313.  
    314.     /*
    315.      * Particle class
    316.      *粒子类
    317.      */
    318.  
    319.     var Particle = (function () {
    320.         function Particle() {
    321.             this.position = new Point();
    322.             this.velocity = new Point();
    323.             this.acceleration = new Point();
    324.             this.age = 0;
    325.         }
    326.  
    327.         Particle.prototype.initialize = function (x, y, dx, dy) {
    328.             this.position.x = x;
    329.             this.position.y = y;
    330.             this.velocity.x = dx;
    331.             this.velocity.y = dy;
    332.             this.acceleration.x = dx * settings.particles.effect;
    333.             this.acceleration.y = dy * settings.particles.effect;
    334.             this.age = 0;
    335.         };
    336.         Particle.prototype.update = function (deltaTime) {
    337.             this.position.x += this.velocity.x * deltaTime;
    338.             this.position.y += this.velocity.y * deltaTime;
    339.             this.velocity.x += this.acceleration.x * deltaTime;
    340.             this.velocity.y += this.acceleration.y * deltaTime;
    341.             this.age += deltaTime;
    342.         };
    343.         Particle.prototype.draw = function (context, image) {
    344.             function ease(t) {
    345.                 return --t * t * t + 1;
    346.             }
    347.  
    348.             var size = image.width * ease(this.age / settings.particles.duration);
    349.             context.globalAlpha = 1 - this.age / settings.particles.duration;
    350.             context.drawImage(
    351.                 image,
    352.                 this.position.x - size / 2,
    353.                 this.position.y - size / 2,
    354.                 size,
    355.                 size
    356.             );
    357.         };
    358.         return Particle;
    359.     })();
    360.  
    361.     /*
    362.      * ParticlePool class
    363.      * 粒子池类
    364.      */
    365.     var ParticlePool = (function () {
    366.         var particles,
    367.             firstActive = 0,
    368.             firstFree = 0,
    369.             duration = settings.particles.duration;
    370.  
    371.         function ParticlePool(length) {
    372.             // create and populate particle pool
    373.             particles = new Array(length);
    374.             for (var i = 0; i < particles.length; i++)
    375.                 particles[i] = new Particle();
    376.         }
    377.  
    378.         ParticlePool.prototype.add = function (x, y, dx, dy) {
    379.             particles[firstFree].initialize(x, y, dx, dy);
    380.  
    381.             // handle circular queue
    382.             firstFree++;
    383.             if (firstFree == particles.length) firstFree = 0;
    384.             if (firstActive == firstFree) firstActive++;
    385.             if (firstActive == particles.length) firstActive = 0;
    386.         };
    387.         ParticlePool.prototype.update = function (deltaTime) {
    388.             var i;
    389.  
    390.             // update active particles
    391.             if (firstActive < firstFree) {
    392.                 for (i = firstActive; i < firstFree; i++)
    393.                     particles[i].update(deltaTime);
    394.             }
    395.             if (firstFree < firstActive) {
    396.                 for (i = firstActive; i < particles.length; i++)
    397.                     particles[i].update(deltaTime);
    398.                 for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);
    399.             }
    400.  
    401.             // remove inactive particles
    402.             while (
    403.                 particles[firstActive].age >= duration &&
    404.                 firstActive != firstFree
    405.                 ) {
    406.                 firstActive++;
    407.                 if (firstActive == particles.length) firstActive = 0;
    408.             }
    409.         };
    410.         ParticlePool.prototype.draw = function (context, image) {
    411.             // draw active particles
    412.             //绘制活性粒子
    413.             if (firstActive < firstFree) {
    414.                 for (i = firstActive; i < firstFree; i++)
    415.                     particles[i].draw(context, image);
    416.             }
    417.             if (firstFree < firstActive) {
    418.                 for (i = firstActive; i < particles.length; i++)
    419.                     particles[i].draw(context, image);
    420.                 for (i = 0; i < firstFree; i++) particles[i].draw(context, image);
    421.             }
    422.         };
    423.         return ParticlePool;
    424.     })();
    425.  
    426.  
    427.     /*
    428.      * Putting it all together
    429.      * 把它们放在一起，立即执行
    430.      * 执行行为：
    431.      *      1、渲染一个
    432.      */
    433.     (function (canvas) {
    434.         //下面的canvas对象获取，由立即执行函数的参数传递了，不需要get获取
    435.         // var canvas = document.getElementById("pinkboard")
    436.         //获取上下文容器、new粒子池对象、定义变量粒子比率变量并赋值、定义事件变量
    437.         var context = canvas.getContext("2d"),
    438.             particles = new ParticlePool(settings.particles.length),
    439.             particleRate =
    440.                 settings.particles.length / settings.particles.duration, // particles/sec
    441.             time;
    442.  
    443.         // get point on heart with -PI <= t <= PI
    444.         //定义得到像素点对象的方法，在下面虚拟画布中调用了该方法
    445.         function pointOnHeart(t) {
    446.             return new Point(
    447.                 160 * Math.pow(Math.sin(t), 3),
    448.                 130 * Math.cos(t) -
    449.                 50 * Math.cos(2 * t) -
    450.                 20 * Math.cos(3 * t) -
    451.                 10 * Math.cos(4 * t) +
    452.                 25
    453.             );
    454.         }
    455.  
    456.  
    457.         function gradientColor(startColor, endColor, step) {
    458.             startRGB = colorRgb(startColor);//转换为rgb数组模式
    459.             startR = startRGB[0];
    460.             startG = startRGB[1];
    461.             startB = startRGB[2];
    462.  
    463.             endRGB = colorRgb(endColor);
    464.             endR = endRGB[0];
    465.             endG = endRGB[1];
    466.             endB = endRGB[2];
    467.  
    468.             sR = (endR - startR) / step;//总差值
    469.             sG = (endG - startG) / step;
    470.             sB = (endB - startB) / step;
    471.  
    472.             var colorArr = [];
    473.  
    474.             for (var i = 0; i < step; i++) {
    475.                 //计算每一步的hex值
    476.                 var hex = colorHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')');
    477.                 colorArr.push(hex);
    478.             }
    479.             return colorArr;
    480.         }
    481.  
    482.         var colorRgb = function (sColor) {
    483.             var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    484.             var sColor = sColor.toLowerCase();
    485.             if (sColor && reg.test(sColor)) {
    486.                 if (sColor.length === 4) {
    487.                     var sColorNew = "#";
    488.                     for (var i = 1; i < 4; i += 1) {
    489.                         sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
    490.                     }
    491.                     sColor = sColorNew;
    492.                 }
    493.                 //处理六位的颜色值
    494.                 var sColorChange = [];
    495.                 for (var i = 1; i < 7; i += 2) {
    496.                     sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
    497.                 }
    498.                 return sColorChange;
    499.             } else {
    500.                 return sColor;
    501.             }
    502.         }
    503.         // 将rgb表示方式转换为hex表示方式
    504.         var colorHex = function (rgb) {
    505.             var _this = rgb;
    506.             var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    507.             if (/^(rgb|RGB)/.test(_this)) {
    508.                 var aColor = _this.replace('rgb', "").replace('(', "").replace(')', "").split(",");
    509.                 var strHex = "#";
    510.                 for (var i = 0; i < aColor.length; i++) {
    511.                     var hex = Number(aColor[i]).toString(16);
    512.                     hex = hex < 10 ? 0 + '' + hex : hex;// 保证每个rgb的值为2位
    513.                     if (hex === "0") {
    514.                         hex += hex;
    515.                     }
    516.                     strHex += hex;
    517.                 }
    518.                 if (strHex.length !== 7) {
    519.                     strHex = _this;
    520.                 }
    521.                 return strHex;
    522.             } else if (reg.test(_this)) {
    523.                 var aNum = _this.replace(/#/, "").split("");
    524.                 if (aNum.length === 6) {
    525.                     return _this;
    526.                 } else if (aNum.length === 3) {
    527.                     var numHex = "#";
    528.                     for (var i = 0; i < aNum.length; i += 1) {
    529.                         numHex += (aNum[i] + aNum[i]);
    530.                     }
    531.                     return numHex;
    532.                 }
    533.             } else {
    534.                 return _this;
    535.             }
    536.         }
    537.  
    538.         var weight = 20;
    539.  
    540.         var colorArrAsc = gradientColor('#FF0000', '#0000FF', weight);
    541.  
    542.  
    543.         var colorArrDesc = gradientColor('#0000FF', '#FF0000', weight);
    544.  
    545.         // alert(weight + ',' + colorArrAsc.length + ',' + colorArrDesc.length);
    546.         //用来设置的颜色\
    547.         // creating the particle image using a dummy canvas
    548.         //使用虚拟画布创建粒子图像，返回了图像的像素点
    549.  
    550.         function getImageAsc(i) {
    551.             var canvas = document.createElement("canvas");
    552.             var context = canvas.getContext("2d");
    553.             canvas.width = settings.particles.size;
    554.             canvas.height = settings.particles.size;
    555.  
    556.             // helper function to create the path
    557.             // Helper函数来创建路径
    558.             function to(t) {
    559.                 var point = pointOnHeart(t);
    560.                 point.x =
    561.                     settings.particles.size / 2 +
    562.                     (point.x * settings.particles.size) / 350;
    563.                 point.y =
    564.                     settings.particles.size / 2 -
    565.                     (point.y * settings.particles.size) / 350;
    566.                 return point;
    567.             }
    568.  
    569.             // create the path
    570.             //创建路径
    571.             context.beginPath();
    572.             var t = -Math.PI;
    573.             var point = to(t);
    574.             context.moveTo(point.x, point.y);
    575.             while (t < Math.PI) {
    576.                 t += 0.01; // baby steps!
    577.                 point = to(t);
    578.                 context.lineTo(point.x, point.y);
    579.             }
    580.             context.closePath();
    581.  
    582.  
    583.             // create the fill
    584.             //创建填充
    585.  
    586.             context.fillStyle = colorArrAsc[i % (weight+1)];
    587.             // alert('asc,'+(i % weight));
    588.             context.fill();
    589.  
    590.  
    591.             // create the image
    592.             var image = new Image();
    593.             image.src = canvas.toDataURL();
    594.  
    595.  
    596.             return image;
    597.         };
    598.  
    599.         function getImageDesc(i) {
    600.             var canvas = document.createElement("canvas");
    601.             var context = canvas.getContext("2d");
    602.             canvas.width = settings.particles.size;
    603.             canvas.height = settings.particles.size;
    604.  
    605.             // helper function to create the path
    606.             // Helper函数来创建路径
    607.             function to(t) {
    608.                 var point = pointOnHeart(t);
    609.                 point.x =
    610.                     settings.particles.size / 2 +
    611.                     (point.x * settings.particles.size) / 350;
    612.                 point.y =
    613.                     settings.particles.size / 2 -
    614.                     (point.y * settings.particles.size) / 350;
    615.                 return point;
    616.             }
    617.  
    618.             // create the path
    619.             //创建路径
    620.             context.beginPath();
    621.             var t = -Math.PI;
    622.             var point = to(t);
    623.             context.moveTo(point.x, point.y);
    624.             while (t < Math.PI) {
    625.                 t += 0.01; // baby steps!
    626.                 point = to(t);
    627.                 context.lineTo(point.x, point.y);
    628.             }
    629.             context.closePath();
    630.  
    631.  
    632.             // create the fill
    633.             //创建填充
    634.  
    635.             context.fillStyle = colorArrDesc[i % (weight+1)];
    636.             // alert('desc,'+(i % (weight+1));
    637.             context.fill();
    638.  
    639.  
    640.             // create the image
    641.             var image = new Image();
    642.             image.src = canvas.toDataURL();
    643.  
    644.  
    645.             return image;
    646.         };
    647.         var image1 = getImageAsc(0);
    648.  
    649.         // render that thing!
    650.         //定义了一个渲染的方法，使用渲染器，渲染这些点
    651.         function render() {
    652.             // next animation frame
    653.             //下一个动画帧
    654.             requestAnimationFrame(render);
    655.  
    656.             // update time
    657.             //更新时间，
    658.             var newTime = new Date().getTime() / 1000,
    659.                 deltaTime = newTime - (time || newTime);
    660.             time = newTime;
    661.             // alert(newTime);
    662.             // clear canvas
    663.             //在给定矩形内清空一个矩形：
    664.             context.clearRect(0, 0, canvas.width, canvas.height);
    665.  
    666.  
    667.             // create new particles
    668.             // 创建新粒子
    669.             var amount = particleRate * deltaTime;
    670.             for (var i = 0; i < amount; i++) {
    671.                 var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
    672.                 var dir = pos.clone().length(settings.particles.velocity);
    673.                 particles.add(
    674.                     canvas.width / 2 + pos.x,
    675.                     canvas.height / 2 - pos.y,
    676.                     dir.x,
    677.                     -dir.y
    678.                 );
    679.             }
    680.  
    681.  
    682.             // update and draw particles
    683.             particles.update(deltaTime);
    684.             particles.draw(context, image1);
    685.         }
    686.  
    687.         // handle (re-)sizing of the canvas
    688.         //定义一个方法，初始化画布的大小
    689.         function onResize() {
    690.             canvas.width = canvas.clientWidth;
    691.             canvas.height = canvas.clientHeight;
    692.         }
    693.  
    694.         window.onresize = onResize;
    695.  
    696.         // delay rendering bootstrap
    697.         //定义一个延迟呈现引导的方法，10微秒后重设画布，并且重新渲染，模拟心跳的效果
    698.         setTimeout(function () {
    699.             onResize();
    700.             render();
    701.         }, 10);
    702.  
    703.         var x = 0
    704.         setInterval(function () {
    705.  
    706.             if (x <= weight) {
    707.                 image1 = getImageAsc(x);
    708.             }
    709.             if (x > weight && x < 2 * weight) {
    710.                 image1 = getImageDesc(x - weight)
    711.             }
    712.             if (x == 2 * weight) {
    713.                 image1 = getImageDesc(x - weight)
    714.                 x = 0;
    715.             }
    716.             x++;
    717.         }, 1000);
    718.  
    719.     })
    720.     (document.getElementById("pinkboard"));
    721.  
    722. SCRIPT>
    723.  
    724. <script>
    725.  
    726.  
    727. script>
    728.  
    729.  
    730. BODY>
    731.  
    732. HTML>

    好啦，本次分享就到这里，祝大家开心~

    最后

    博主为人老实，无偿解答问题，也会录制一些学习视频❤

    如果对您有帮助，希望能给个👍/评论/收藏

    您的三连~是对我创作最大的动力支持

  • 相关阅读:
    Compiling TraX library操作
    数据科学与大数据（学习记录）
    【干货】Python注释快捷键
    2.数据及其预处理
    【Linux】如何实现虚拟机系统与本地系统的通信连接
    docker安装skyWalking笔记
    使用Python分析14亿条数据
    springboot+vue项目合同申报系统java
    看了这篇不用再苦恼如何将视频压缩了
    curl命令介绍
  • 原文地址：https://blog.csdn.net/qq_44794321/article/details/127736297