当前位置：首页 > news >正文

HTML满屏飘字代码

news 2024/10/23 14:34:34

文章目录

序号	目录
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	HTML3D相册
14	HTML旋转相册
15	HTML基础烟花秀
16	HTML炫酷烟花秀
17	HTML粉色烟花秀
18	HTML新春烟花
19	HTML龙年大吉
20	HTML圣诞树
21	HTML大雪纷飞
22	HTML想见你
23	HTML元素周期表
24	HTML飞舞的花瓣
25	HTML星空特效
26	HTML黑客帝国字母雨
27	HTML哆啦A梦
28	HTML流星雨
29	HTML沙漏爱心
30	HTML爱心字母雨
31	HTML爱心流星雨
32	HTML生日蛋糕
33	HTML流光爱心
34	HTML3D旋转相册
35	HTML满屏飘字

文章目录

写在前面

完整代码

代码分析

写在后面

写在前面

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

完整代码

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

代码分析

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

一、HTML结构

<!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>
</body>
</html>

<head>部分：定义了页面的基础信息。通过<meta charset="UTF-8">设置了字符编码为UTF-8，保证中文字符的正确显示。<meta name="viewport">确保页面在不同设备上响应式调整。页面标题设置为“满屏飘字”。
<style>部分：页面样式定义。
- body设置了margin: 0以移除页面的默认外边距，overflow: hidden则禁止页面滚动，确保动画只在可见区域展示。background-color: black将页面背景设置为黑色，以突出彩色文字和小球的效果。
- canvas设置为display: block，移除默认的行内元素特性，使其与页面边界无缝对齐。
<canvas>元素：这是一个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; i++) {loves.push(new Love());loves.push(new Ball());
}

通过循环生成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，形成持续的动画效果。