HTML 动态爱心代码_爱心代码html源码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_55879366/article/details/146295420

一、前言

傻瓜式操作运行的动态爱心代码，手中有电脑或手机即可完成，喜欢的可以拿走使用优化。

二、效果

该动态为爱心由下向上，轨迹变化，带有拖尾效果，并能够与鼠标互动产生排斥效果，爱心颜色随机生成。如下图所示。

三、使用方法

1、新建一个txt文件（有编辑器的直接创建html文件将代码粘进去运行就行）。

2、复制上方代码并粘贴进去

3、找到以下代码，即可修改画面中的文字

ctx.fillText('这里添加文字', canvas.width/2, canvas.height/2); // 居中显示

4、保存退出，修改文件扩展名为html。

5、双击使用浏览器打开即可。

四、不懂创建运行怎么办

文章下面评论，看到会及时回复帮助。

五、代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态爱心</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            overflow: hidden; /* 隐藏滚动条 */
        }

        /* 画布全屏设置 */
        canvas {
            background: #000;
            display: block;
        }
    </style>
</head>
<body>
    <!-- 绘图画布 -->
    <canvas id="canvas"></canvas>

    <script>
        // 初始化画布上下文
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 窗口尺寸调整处理函数
        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resize);
        resize(); // 初始化尺寸

        // 心形参数方程（数学公式）
        function heart(t) {
            const x = 16 * Math.pow(Math.sin(t), 3); // x坐标计算
            const y = -13 * Math.cos(t) + 5 * Math.cos(2*t) + 2*Math.cos(3*t) + Math.cos(4*t); // y坐标计算
            return {x, y};
        }

        // 爱心粒子类
        class Heart {
            constructor() {
                this.reset(); // 初始化时重置属性
            }

            reset() {
                // 粒子重置到初始状态
                this.progress = 0; // 动画进度
                this.size = Math.random() * 12 + 8; // 尺寸随机（8-20）
                this.speed = Math.random() * 0.006 + 0.0002; // 速度调慢（原0.01-0.03）
                this.color = `hsl(${Math.random() * 360}, 100%, 70%)`; // 随机HSL颜色
                this.position = {
                    x: Math.random() * canvas.width, // 初始X位置
                    y: canvas.height + 50 // 从屏幕底部开始
                };
            }

            update() {
                // 更新粒子位置
                this.progress += this.speed;
                // 垂直运动（贝塞尔曲线）
                this.position.y = canvas.height - (this.progress * canvas.height * 1.2);
                // 水平摆动
                this.position.x += Math.sin(this.progress * Math.PI * 2) * 2;

                // 超过屏幕后重置
                if (this.position.y < -50) this.reset();
            }

            draw() {
                // 绘制单个爱心
                ctx.save();
                ctx.translate(this.position.x, this.position.y);
                ctx.scale(this.size/20, this.size/20); // 缩放控制大小

                // 绘制心形路径
                ctx.beginPath();
                for (let t = 0; t < 2 * Math.PI; t += 0.01) {
                    const {x, y} = heart(t);
                    ctx.lineTo(x * 1.2, y * 1.2);
                }

                // 样式设置
                ctx.fillStyle = this.color;
                ctx.shadowColor = this.color;
                ctx.shadowBlur = 15; // 发光效果
                ctx.globalAlpha = 1 - this.progress/1.5; // 透明度渐变
                ctx.fill();
                ctx.restore();
            }
        }

        // 创建爱心数组（60个粒子）
        const hearts = Array.from({length: 60}, () => new Heart());

        // 绘制居中名字
        function drawName() {
            ctx.save();
            ctx.font = 'bold 48px Arial'; // 字体设置
            ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; // 半透明白色
            ctx.textAlign = 'center'; // 水平居中
            ctx.textBaseline = 'middle'; // 垂直居中
            ctx.shadowColor = 'rgba(255, 0, 0, 0.5)'; // 红色阴影
            ctx.shadowBlur = 10;
            ctx.fillText('Your Name', canvas.width/2, canvas.height/2); // 居中显示
            ctx.restore();
        }

        // 动画循环
        function animate() {
            // 清空画布（使用半透明填充实现拖尾效果）
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 更新和绘制所有爱心
            hearts.forEach(heart => {
                heart.update();
                heart.draw();
            });

            drawName(); // 绘制名字

            requestAnimationFrame(animate); // 下一帧循环
        }

        // 鼠标交互：爱心排斥效果
        canvas.addEventListener('mousemove', (e) => {
            hearts.forEach(heart => {
                const dx = e.clientX - heart.position.x;
                const dy = e.clientY - heart.position.y;
                const dist = Math.sqrt(dx*dx + dy*dy);

                if (dist < 100) { // 距离小于100px时生效
                    heart.position.x += dx * 0.03; // X轴偏移
                    heart.position.y += dy * 0.03; // Y轴偏移
                }
            });
        });

        animate(); // 启动动画
    </script>
</body>
</html>