超简单的 html表白代码

最新推荐文章于 2025-04-23 06:52:40 发布

霸敛

最新推荐文章于 2025-04-23 06:52:40 发布

阅读量2.6k

点赞数 9

分类专栏：笔记文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_52754254/article/details/137052438

版权

html表白代码（获取女孩子芳心的超简单代码）

`制作不易，点个关注！祝大家表白成功！`

1.心花怒放

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Canvas 绘制一个❤</title>
    <link rel="shortcut icon" href="../../assets/images/icon/favicon.ico" type="image/x-icon">
    <style>
        html,
        body {
     
            height: 100%;
            padding: 0;
            margin: 0;
        }

        canvas {
     
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <canvas id="pinkboard">
        Canvas Not Support
    </canvas>
    <script>
        /*
     * Settings
     */
        var settings = {
     
            particles: {
     
                length: 500, // maximum amount of particles
                duration: 2, // particle duration in sec
                velocity: 100, // particle velocity in pixels/sec
                effect: -0.75, // play with this for a nice effect
                size: 30, // particle size in pixels
            },
        };

        /*
         * RequestAnimationFrame polyfill by Erik M?ller
         */
        (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)
                }
            }
        }()
        );

        /*
         * Point class
         */
        var Point = (function () {
     
            function Point(x, y) {
     
                this.x = (typeof x !== 'undefined') ? x : 0;
                this.y = (typeof y !== 'undefined') ? y : 0;
            }
            Point.prototype.clone = function () {
     
                return new Point(this.x, this.y);
            };
            Point.prototype.length = function (length) {
     
                if (typeof length == 'undefined')
                    return Math.sqrt(this.x * this.x + this.y * this.y);
                this.normalize();
                this.x *= length;
                this.y *= length;
                return this;
            };
            Point.prototype.normalize = function () {
     
                var length = this.length();
                this.x /= length;
                this.y /= length;
                return this;
            };
            return Point;
        })();

        /*
         * Particle class
         */
        var Particle = (function () {
     
            function Particle() {
     
                this.position = new Point();
                this.velocity = new Point();
                this.acceleration = new Point();
                this.age = 0;
            }
            Particle.prototype.initialize = function (x, y, dx, dy) {
     
                this.position.x = x;
                this.position.y = y;
                this.velocity.x = dx;
                this.velocity.y = dy;
                this.acceleration.x = dx * settings.particles.effect;
                this.acceleration.y = dy * settings.particles.effect;
                this.age = 0;
            };
            Particle.prototype.update = function (deltaTime) {
     
                this.position.x += this.velocity.x * deltaTime;
                this.position.y += this.velocity.y * deltaTime;
                this.velocity.x += this.acceleration.x * deltaTime;
                this.velocity.y += this.acceleration.y * deltaTime;
                this.age += deltaTime;
            };
            Particle.prototype.draw = function (context, image) {
     
                function ease(t) {
     
                    return (--t) * t * t + 1;
                }
                var size = image.width * ease(this.age / settings.particles.duration);
                context.globalAlpha = 1 - this.age / settings.particles.duration;
                context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
            };
            return Particle;
        })();

        /*
         * ParticlePool class
         */
        var ParticlePool = (function () {
     
            var particles,
                firstActive = 0,
                firstFree = 0,
                duration = settings.particles.duration;

            function ParticlePool(length) {
     
                // create and populate particle pool
                particles = new Array(length);
                for (var i = 0; i < particles.length; i++)
                    particles[i] = new Particle();
            }
            ParticlePool.prototype.add = function (x, y, dx, dy) {
     
                particles[firstFree].initialize(x, y, dx, dy);

                // handle circular queue
                firstFree++;
                if (firstFree == particles.length) firstFree = 0;
                if (firstActive == firstFree) firstActive++;
                if (firstActive == particles.length) firstActive = 0;
            };
            ParticlePool.prototype.update = function (deltaTime) {
     
                var i;

                // update active particles
                if (firstActive < firstFree) {
     
                    for (i = firstActive; i < firstFree; i++)
                        particles[i]</