制作一个动图|青训营

今天在其他博主处看到一个制作动图的文档，于是自己也尝试了一下，效果还可以：

新建一个文本文档，然后把文中的代码复制到其中，之后再将其另存为.html文件格式。这样就可以了，之后打开该html文件就可以看到动画了。

动图展示如下：

网页将由一个 canvas 元素组成，用于绘制粒子。我们需要在标签中添加标题和 CSS 样式，然后在标签中添加 canvas 元素和 JavaScript 代码。

JavaScript 代码

现在，我们将使用 JavaScript 创建一个 Particle 类，用于表示粒子对象。每个粒子都有随机的位置、大小、颜色和竖直速度。我们还将创建一个粒子数组，并在画布上动态绘制这些粒子，形成粒子效果。

复制代码

<html>
<head>
    <title>好看的粒子雨动画</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        // 获取canvas元素和绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置canvas的宽度和高度
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 粒子对象
        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 5 + 1; // 随机大小
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
                this.velocityY = Math.random() * 2 + 1; // 随机竖直速度
            }

            // 更新粒子的位置
            update() {
                this.y += this.velocityY;

                // 当粒子到达画布底部时，重新放置到画布顶部
                if (this.y > canvas.height) {
                    this.y = 0;
                }
            }

            // 绘制粒子
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

        // 创建粒子数组
        const particles = [];
        const numParticles = 500;

        // 初始化粒子
        for (let i = 0; i < numParticles; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            particles.push(new Particle(x, y));
        }

        // 动画循环函数
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }

            requestAnimationFrame(animate);
        }

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

JavaScript 逻辑解释

我们通过 document.getElementById 方法获取 canvas 元素，并创建一个绘图上下文 ctx，用于在画布上绘制粒子。
Particle 类表示每个粒子对象。在构造函数中，我们为每个粒子设置随机的位置、大小、颜色和竖直速度。
update 方法用于更新粒子的位置。我们让每个粒子沿竖直方向运动，并在到达画布底部时将其重新放置到画布顶部，实现循环运动。
draw 方法用于绘制粒子，我们使用 ctx.arc 方法绘制圆形粒子，并设置颜色为随机的彩虹色。
我们创建了一个粒子数组 particles，并在初始化时生成了多个随机位置的粒子对象。
animate 函数用于实现动画循环。在每一帧中，我们清空画布、更新每个粒子的位置，并绘制粒子，然后使用 requestAnimationFrame 方法递归调用 animate 函数，实现连续的动画效果。

HTML 是什么？

表示超文本标记语言（Hyper Text Markup Language）
描述了网页的结构
由一些列元素组成
元素告诉浏览器如何显示内容，由标签表示
标签标记了"标题"，"段落"，"表"等内容
浏览器不显示HTMl标记，而是使用它们来呈现页面内容

基本结构

xml 复制代码

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
    	<title>无标题文档</title>
    </head>
    <body>
    	// 页面源代码内容
    </body>
</html>

<!DOCTYPE html>，文档声明，位于文档最前面位置。
<html>元素是一个HTML页面的根元素
<head>，元素包含关于文档的元信息
<meta>，定义文档元数据，常用来描述当前页面的特性，比如文档字符集 charset="utf-8"
<title>，元素指定该文档的标题
<body>，元素包含可见页面的所有内容

CSS 样式的几种形式 在实际应用中向 HTML 中引入 CSS 样式的方法有三种，分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景，本节我们先来讲一下行内样式。

什么是行内样式

行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的：

css 复制代码

<p style="font-size: 18px;">行内样式</p>

HTML 中的 style 属性提供了一种改变所有 HTML 元素样式的通过方法，语法格式如下所示：

ini 复制代码

<标签 style="样式声明1;样式声明2;样式声明3"></标签>

要记得用在每个样式声明之间使用分号 ; 分隔哟，否则样式会失效的。

示例：

例如下面这段代码，通过 CSS 行内样式，将第一个段落中的字体设置成了 20px，颜色为红色，加粗显示。第二个段落中的字体大小设置为 16px，颜色为绿色，倾斜显示：

xml 复制代码

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
    </head>
    <body>
       <p style="font-size: 20px;color: red;font-weight: bold;">侠课岛欢迎你！</p>
       <p style="font-size: 16px;color: green;font-style: italic;">侠课岛欢迎你！</p>
    </body>
</html>

在浏览器中演示效果：

什么是内嵌样式

内嵌样式就是将 CSS 代码写在 HTML 页面中的 <head> 标签中的 <style> 标签内。因为它与 HTML 内容位于同一个文件中，所以叫做内嵌样式表。

示例：

例如下面这个例子就是使用了内嵌样式：

xml 复制代码

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <style>
            h2{
                color: lightsalmon;
            }
            p{
                color:limegreen ;
                font-size: 18px;
                line-height: 20px;
            }
            span{
                color: mediumpurple;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
       <h2>《木兰花令 拟古决绝词》</h2>
       <p>人生若只如初见，何事秋风悲画扇</p>
       <p>等闲变却故人心，却道故人心易变。</p>
       <p>骊山语罢清宵半，泪雨零铃终不怨。</p>
       <p>何如薄幸锦衣郎，<span>比翼连枝当日愿。</span></p>
    </body>
</html>

在浏览器中的演示效果：

记得内嵌样式必须写在<style>标签中，否则无效。

什么是外部样式

外部样式就是把 CSS 代码保存在一个单独的文件中，文件的扩展名为 .css，然后在 HTML 页面中引入这个 CSS 文件即可。

HTML 文件引入外部样式表有两种方式，分别是链接式和导入式。

链接外部样式表

链接外部样式表就是在 HTML 文件中使用 <link/> 标签链接外部样式表，且 <link/> 标签必须放到 HTML 中的 <head> 标签内。在一个 HTML 页面中可以链接多个 CSS 文件，一个 CSS 文件也可以被多个 HTML 页面引用。

语法如下：

bash 复制代码

<link rel="stylesheet" type="text/css" href="css文件路径">

其中 rel="stylesheet" 是指在页面中使用这个外部样式表，type="text/css" 是指文件的类型是样式表文本，href 属性用于指定 css 文件的路径。

外部样式表实现了结构与样式的彻底分离，一个 css 文件可以应用到多个 HTML 页面中。当改变 css 文件中的样式时，所有应用这个 css 文件的页面中的样式都会随之改变。

示例：

例如我们创建一个 index.css 的文件，将需要用到的 css 代码保存到这个文件中：

css 复制代码

h2{
    color: lightsalmon;
    }
p{
    color:limegreen ;
    font-size: 18px;
    line-height: 20px;
}
span{
    color: mediumpurple;
    font-weight: bold;
}

然后可以在 HTML 文件中通过 <link/> 标签引用这个文件：

xml 复制代码

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="./index.css">
    </head>
    <body>
       <h2>《木兰花令 拟古决绝词》</h2>
       <p>人生若只如初见，何事秋风悲画扇</p>
       <p>等闲变却故人心，却道故人心易变。</p>
       <p>骊山语罢清宵半，泪雨零铃终不怨。</p>
       <p>何如薄幸锦衣郎，<span>比翼连枝当日愿。</span></p>
    </body>
</html>

在浏览器中演示效果：

可以看到最终效果和上一节内嵌样式示例中的是效果一样。只不过 CSS 部分独立为了一个单独的文件。

由于链接式在减少代码书写和减少维护工作方面都非常突出，所以链接式是最常用的一种引用 CSS 样式的方法。

导入外部样式表

导入外部样式表就是在 HTML 页面中使用 @import 导入外部样式表，导入样式表的语法需要放置到 <style> 标签中。

导入外部样式表和链接外部样式表是很像的，都实现了页面与样式的分离。不同在于导入外部样式表在页面初始化时，就把样式导入到了页面中，这样就变成了内嵌样式。而链接外部样式表是在页面中有标签需要样式时才以链接的方式引入，这样看的话链接外部样式表会更加合适。

语法格式：

xml 复制代码

<style>
    @import url("css文件路径");
</style>

@import 表示导入文件，前面的 @ 符号必须写哟，url 中的则是样式表文件的路径。

通过本篇技术博客，我们学习了如何使用 HTML、CSS 和 JavaScript 创造一个动态网页示例。我们实现了彩色粒子效果，并让粒子在画布上飘动。