HTML满屏飘字-html-CSS教程网

HTML满屏飘字

写在前面

一段满屏飘字的浪漫代码，用 HTML5 Canvas 实现动态文字与彩球交织飞舞的视觉盛宴，让爱意在屏幕上自由流淌。

系列文章

序号	目录
1	HTML满屏跳动的爱心
2	HTML五彩缤纷的爱心
3	HTML满屏漂浮爱心
4	HTML情人节爱心
5	HTML蓝色爱心射线
6	HTML跳动的爱心
7	HTML跳动的双爱心
8	HTML粒子爱心
9	HTML蓝色动态爱心
10	HTML橙色动态粒子爱心
11	HTML旋转爱心
12	HTML爱情树
13	HTML元素周期表
14	HTML飞舞的花瓣
15	HTML星空特效
16	HTML黑客帝国字母雨
17	HTML哆啦A梦
18	HTML流星雨
19	HTML沙漏爱心
20	HTML爱心字母雨
21	HTML爱心流星雨
22	HTML生日蛋糕
23	HTML流光爱心
24	HTML粉色爱心
25	HTML满屏飘字
26	HTML飞舞爱心
27	HTML音乐圣诞树
28	HTML星空圣诞树
29	HTML礼物圣诞树
30	HTML旋转圣诞树
31	HTML旋转相册①
32	HTML旋转相册②
33	HTML旋转相册③
34	HTML大雪纷飞①
35	HTML大雪纷飞②
36	HTML炫酷烟花①
37	HTML炫酷烟花②
38	HTML炫酷烟花③
39	HTML炫酷烟花④
40	HTML炫酷烟花⑤
41	HTML炫酷烟花⑥
42	HTML炫酷烟花⑦
43	HTML炫酷烟花⑧
44	HTML炫酷烟花⑨
45	HTML金色流星雨
敬请期待……

技术需求

Canvas 全屏渲染：通过 window.innerWidth 和 window.innerHeight 动态设置画布尺寸，适配不同设备屏幕，确保视觉覆盖完整。
双缓冲绘制机制：使用 clearRect 清除前一帧画面，结合 requestAnimationFrame 实现流畅动画循环，避免闪烁与卡顿。
随机化视觉元素：每条文字和彩球在颜色、位置、速度上均采用随机生成策略，增强画面丰富性与自然感。
文字动态表现：利用 fillText 绘制彩色情话，字体选用轻松活泼的 ***ic Sans MS，传递温暖甜蜜的情绪氛围。
对象封装与复用：通过 Love 与 Ball 类分别封装文字与彩球的行为逻辑，实现代码结构清晰、易于扩展。
边界重置机制：当元素移出画布后，自动重置其坐标与属性，形成无限循环的动态效果，延长观赏体验。
多样化情感表达：预设多语言、多风格的爱情语句，涵盖中英文表白短句，营造浓厚浪漫氛围。

主要代码

创作不易，订阅后可查看完整代码

《Python趣味编程》
《C/C++趣味编程》
《HTML趣味编程》
《Java趣味编程》

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>满屏飘字</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
 
    const words = [
        "我爱你", "I Love You!", "永远爱你", "你是我年少的欢喜",
        "一生一世一双人", "余生我陪你走", "陪你到来生", "春风十里不如你",
        "三生有幸来日方长", "夜很长幸有你", "爱你的全部", "踏过八荒四海只为你",
        "愿得一人心", "众里寻他千百度", "顶峰相见", "等你下课",
        "往后余生", "Missing You!", "做我女朋友好么",
        "你已经在我的未来里了", "陪你到世界之巅", "白头偕老",
        "我喜欢你", "好想好想你", "想你想你想你",
        "今夜月色真美", "你是我的唯一"
    ];
 
    class Love {
        constructor() {
            this.x = -200;  // 从左侧画布外开始
            this.y = Math.random() * canvas.height;
            this.speed = Math.random() * 3 + 2;
            this.word = words[Math.floor(Math.random() * words.length)];
            this.color = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
        }
        draw() {
            ctx.fillStyle = this.color;
            ctx.font = '24px ***ic Sans MS';
            ctx.textAlign = 'center';
            ctx.fillText(this.word, this.x, this.y);
        }
        move() {
            this.x += this.speed;  // 文字水平向右移动
            if (this.x > canvas.width + 200) {  // 文字移出画布右侧后重置
                this.x = -200;
                this.y = Math.random() * canvas.height;
                this.word = words[Math.floor(Math.random() * words.length)];
                this.color = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
            }
        }
    }
 
    class Ball {
        constructor() {
            this.r = Math.random() * 3 + 2;
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.speed = Math.random() * 8 + 2;
            this.color = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
        }
        draw() {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.fill();
        }
        move() {
            this.y += this.speed;
            if (this.y > canvas.height + this.r) {
                this.y = -this.r;
                this.x = Math.random() * canvas.width;
                this.color = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
            }
        }
    }
 
    const loves = [];
    for (let i = 0; i < 66; i++) {
        loves.push(new Love());
        loves.push(new Ball());
    }
 
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        loves.forEach(obj => {
            obj.move();
            obj.draw();
        });
        requestAnimationFrame(animate);
    }
    animate();
</script>
</body>
</html>

……

创作流程

我创作这个作品的初衷，是想用代码表达一种纯粹而浓烈的情感——爱。我不想让它只是冷冰冰的文字堆砌，而是希望它能像一场盛大的告白仪式，在屏幕上绽放出心跳的节奏。于是，我决定打造一个满屏飘动的浪漫世界，让每一句“我爱你”都像风中的花瓣，自由飞舞，无处不在。

一开始，我选择了黑色背景，因为我觉得真正的浪漫总是在夜里最动人。深邃的黑如同宇宙的底色，衬托出每一个光点、每一段文字的珍贵。在这片黑暗中，我希望看到的是温暖的色彩流动，是情感的具象化呈现。于是我引入了彩色的文字和跳动的小球，它们不只是装饰，更像是情感的化身。

我设计了两种动态元素：一种是带着情话飞行的文字，另一种是无声跳跃的彩球。文字承载着语言的温度，每一条都是我精心挑选的情话，有中文的含蓄深情，也有英文的直白热烈，还有那些诗意般的告白，像是“今夜月色真美”，短短一句，却藏着千言万语。而彩球则象征着心跳、火花、或是灵魂的共鸣，它们不说话，却一直在舞动，为这场视觉盛宴增添节奏与律动。

为了让画面不显得机械重复，我赋予每一个元素独立的生命。它们有各自的起点、速度、颜色和轨迹。文字从左侧缓缓飘出，穿越整个屏幕，就像一段奔赴爱人的旅程；彩球则从上方落下，又悄然重生，仿佛永不停歇的思念。当它们消失在边缘，我又让它们重新出现，形成一种循环不息的美感——正如爱一样，不会终结，只会不断重生。

我没有使用任何复杂的动画库，而是坚持用原生 Canvas 手动绘制每一帧。这个过程让我更贴近代码的本质，也让我更能掌控每一个细节的情感表达。我反复调试字体大小、颜色饱和度、移动速度，只为找到最舒服的视觉节奏。我希望用户打开页面的那一刻，不是被炫技震撼，而是被温柔击中。

最终，当我按下运行键，看着满屏的“我爱你”交错飞过，彩球如星辰般坠落又升起，我的心也跟着颤动了一下。这不再是一段代码，而是一封写给世界的信，一句无声却响亮的告白。我用逻辑编织浪漫，用算法传递温柔——原来，代码也可以如此深情。

写在后面

我是一只有趣的兔子，感谢你的喜欢！

转载请说明出处内容投诉
CSS教程网 » HTML满屏飘字

哈哈哈

分享到：