菜单 搜索
首页 前端知识 HTML满屏飘字代码

HTML满屏飘字代码

2024-10-26 09:10:46 前端知识 前端哥 379 366 我要收藏

 

文章目录

序号目录
1HTML满屏跳动的爱心（可写字）
2HTML五彩缤纷的爱心
3HTML满屏漂浮爱心
4HTML情人节快乐
5HTML蓝色爱心射线
6HTML跳动的爱心（简易版）
7HTML粒子爱心
8HTML蓝色动态爱心
9HTML跳动的爱心（双心版）
10HTML橙色动态粒子爱心
11HTML旋转爱心
12HTML爱情树
13HTML3D相册
14HTML旋转相册
15HTML基础烟花秀
16HTML炫酷烟花秀
17HTML粉色烟花秀
18HTML新春烟花
19HTML龙年大吉
20HTML圣诞树
21HTML大雪纷飞
22HTML想见你
23HTML元素周期表
24HTML飞舞的花瓣
25HTML星空特效
26HTML黑客帝国字母雨
27HTML哆啦A梦
28HTML流星雨
29HTML沙漏爱心
30HTML爱心字母雨
31HTML爱心流星雨
32HTML生日蛋糕
33HTML流光爱心
34HTML3D旋转相册
35HTML满屏飘字

目录

文章目录

写在前面

完整代码

代码分析

写在后面

写在前面

本期博主用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>

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

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

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

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

  3. <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，形成持续的动画效果。

三、总结

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

写在后面

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/19150.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！