HTML满屏飘字代码

文章目录

目录

文章目录

写在前面

完整代码

代码分析

写在后面

写在前面

本期博主用 HTML 实现了满屏飘字代码，小伙伴们可以更换成自己想要输入的文字哦。

完整代码

代码分析

这段代码通过 HTML、CSS 和 JavaScript 创建了一个满屏飘动文字和彩色小球的动画效果，利用了 元素来进行绘图与动画的实现。下面，我将对代码进行详细分析，帮助你理解其功能与实现原理。

一、HTML 结构

1. 部分 ：定义了页面的基础信息。通过 设置了字符编码为 UTF-8，保证中文字符的正确显示。确保页面在不同设备上响应式调整。页面标题设置为“满屏飘字”。

2. 部分：页面样式定义。

   • body设置了 margin: 0 以移除页面的默认外边距，overflow: hidden则禁止页面滚动，确保动画只在可见区域展示。background-color: black将页面背景设置为黑色，以突出彩色文字和小球的效果。

   • canvas设置为display: block，移除默认的行内元素特性，使其与页面边界无缝对齐。

3. 元素 ：这是一个 HTML 绘图元素，通过 JavaScript 的Canvas API 绘制 2D 图形和动画，id 设置为canvas，后续通过脚本进行控制。

二、JavaScript 代码分析

1. Canvas 画布初始化

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

• 通过 document.getElementById('canvas') 获取 canvas 元素，并使用 getContext('2d') 获取 2D 绘图上下文（ctx），后续通过该对象操作绘图。

• 将 canvas 的宽度和高度设置为浏览器窗口的宽高，使画布充满整个页面。

2. 定义飘动的文字

const words = [
    "我爱你", "I Love You!", "永远爱你", "你是我年少的欢喜",
    "一生一世一双人", "余生我陪你走", "陪你到来生", "春风十里不如你",
    "三生有幸来日方长", "夜很长幸有你", "爱你的全部", "踏过八荒四海只为你",
    "愿得一人心", "众里寻他千百度", "顶峰相见", "等你下课",
    "往后余生", "Missing You!", "做我女朋友好么",
    "你已经在我的未来里了", "陪你到世界之巅", "白头偕老",
    "我喜欢你", "好想好想你", "想你想你想你",
    "今夜月色真美", "你是我的唯一"
];

该数组保存了一系列浪漫的文字，将在画布上随机飘动。每次生成一个新文字时，从这个数组中随机挑选一个。

3. Love 类（用于绘制文字）

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 Comic 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)})`;
        }
    }
}

• 构造函数 ：每个Love 对象在创建时初始化其位置、速度、文字内容和颜色。

  • this.x = -200：文字从画布左侧之外的位置开始，这样会有一个进入屏幕的过程。

  • this.y = Math.random() * canvas.height：文字的垂直位置是随机的。

  • this.speed = Math.random() * 3 + 2：文字水平向右移动的速度为 2 到 5 的随机值。

  • this.word：从预定义的 words 数组中随机选取一个。

  • this.color：随机生成文字的颜色。

• draw()方法 ：负责在canvas 上绘制文字。通过设置字体、颜色、对齐方式，然后调用 fillText 将文字绘制到指定位置。

• move()方法：负责让文字从左到右移动。当文字移出屏幕右侧时，重新随机生成位置、文字和颜色。

4. Ball 类（用于绘制小球）

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)})`;
        }
    }
}

Ball类的结构与 Love 类类似，但负责绘制小球。小球具有随机大小、颜色，并以不同的速度从上到下移动。移出屏幕底部的小球会重新从顶部生成，并赋予新的随机颜色。

5. 动画的实现

const loves = [];
for (let i = 0; i 

通过循环生成 66 个 Love 对象和 66 个 Ball 对象，将它们存入数组 loves 中。

function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);
    loves.forEach(obj => {obj.move();
        obj.draw();});
    requestAnimationFrame(animate);
}
animate();

animate函数是动画的核心。它使用 clearRect 清除整个画布，防止重叠。接着调用每个对象的 move 和draw方法，实现物体的移动和绘制。最后，通过 requestAnimationFrame 递归调用animate，形成持续的动画效果。

三、总结

总的来说，这段代码展示了如何利用 canvas 绘制动态的文字和小球。通过使用 Love 类和 Ball 类，代码实现了对象的创建、绘制和移动。每个对象具有随机的颜色、位置和速度，确保动画效果多样化。

写在后面

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