解释：

• 我们定义一个 元素，所有动画都将在其中发生。
• styles.css 将链接到画布样式。
• 主要动画逻辑包含在script.js中。

2. 使用 CSS 设置画布样式

让我们添加一个简单的样式，为画布提供黑色背景，并确保删除所有内边距和边距。

* {    margin: 0;    padding: 0;    box-sizing: border-box;}canvas {    background-color: black;}

解释：

• 将边距和填充设置为零可确保画布填满整个屏幕。
• 黑色背景为白色颗粒提供了良好的对比度。

3. 粒子类：创造魔法

Particle类是动画的核心所在。每个粒子在画布上移动，留下其过去位置的痕迹，创造流动的效果。

class Particle {    constructor(effect) {        this.effect = effect;        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.speedModifier = Math.floor(Math.random() * 5   1);        this.history = [{ x: this.x, y: this.y }];        this.maxLength = Math.floor(Math.random() * 200   10);        this.timer = this.maxLength * 2;        this.colors = [\\'#4C026B\\', \\'#8E0E00\\', \\'#9D0208\\', \\'#BA1A1A\\', \\'#730D9E\\'];        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];    }    draw(context) {        context.beginPath();        context.moveTo(this.history[0].x, this.history[0].y);        for (let i = 1; i < this.history.length; i  ) {            context.lineTo(this.history[i].x, this.history[i].y);        }        context.strokeStyle = this.color;        context.stroke();    }    update() {        this.timer--;        if (this.timer >= 1) {            let x = Math.floor(this.x / this.effect.cellSize);            let y = Math.floor(this.y / this.effect.cellSize);            let index = y * this.effect.cols   x;            let angle = this.effect.flowField[index];            this.speedX = Math.cos(angle);            this.speedY = Math.sin(angle);            this.x  = this.speedX * this.speedModifier;            this.y  = this.speedY * this.speedModifier;            this.history.push({ x: this.x, y: this.y });            if (this.history.length > this.maxLength) {                this.history.shift();            }        } else if (this.history.length > 1) {            this.history.shift();        } else {            this.reset();        }    }    reset() {        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.history = [{ x: this.x, y: this.y }];        this.timer = this.maxLength * 2;    }}

解释：

• 构造函数：每个粒子都用随机位置和移动速度初始化。历史数组跟踪过去的位置以创建轨迹。
• draw()：该函数根据粒子的历史记录绘制粒子的路径。粒子留下彩色轨迹，增加视觉效果。
• update()：这里，通过计算与流场的角度来更新粒子的位置。速度和方向由三角函数控制。
• reset()：当粒子完成其轨迹时，它会重置到新的随机位置。

4.效果类：组织动画

Effect 类处理粒子的创建和流场本身，它控制粒子的运动。

class Effect {    constructor(canvas) {        this.canvas = canvas;        this.width = this.canvas.width;        this.height = this.canvas.height;        this.particles = [];        this.numberOfParticles = 3000;        this.cellSize = 20;        this.flowField = [];        this.curve = 5;        this.zoom = 0.12;        this.debug = true;        this.init();    }    init() {        this.rows = Math.floor(this.height / this.cellSize);        this.cols = Math.floor(this.width / this.cellSize);        for (let y = 0; y < this.rows; y  ) {            for (let x = 0; x < this.cols; x  ) {                let angle = (Math.cos(x * this.zoom)   Math.sin(y * this.zoom)) * this.curve;                this.flowField.push(angle);            }        }        for (let i = 0; i < this.numberOfParticles; i  ) {            this.particles.push(new Particle(this));        }    }    drawGrid(context) {        context.save();        context.strokeStyle = \\'white\\';        context.lineWidth = 0.3;        for (let c = 0; c < this.cols; c  ) {            context.beginPath();            context.moveTo(c * this.cellSize, 0);            context.lineTo(c * this.cellSize, this.height);            context.stroke();        }        for (let r = 0; r < this.rows; r  ) {            context.beginPath();            context.moveTo(0, r * this.cellSize);            context.lineTo(this.width, r * this.cellSize);            context.stroke();        }        context.restore();    }    render(context) {        if (this.debug) this.drawGrid(context);        this.particles.forEach(particle => {            particle.draw(context);            particle.update();        });    }}

解释：

• 构造函数：初始化画布尺寸、粒子数量、流场。
• init()：通过组合每个网格单元的三角函数来计算流场的角度。该场影响粒子的移动方式。
• drawGrid()：绘制将画布划分为单元格的网格，调试时使用。
• render()：调用每个粒子的绘制和更新方法，以在画布上为粒子设置动画。

5. 通过动画循环让它变得栩栩如生

为了让一切正常工作，我们需要一个动画循环来不断清除画布并重新渲染粒子：

const effect = new Effect(canvas);function animate() {    ctx.clearRect(0, 0, canvas.width, canvas.height);    effect.render(ctx);    requestAnimationFrame(animate);}animate();

解释：

• clearRect()：清除每一帧上的画布，以避免覆盖之前的帧。
• requestAnimationFrame：通过递归调用animate()函数来保持动画流畅。

结论

通过分解 Particle 和 Effect 类，我们仅使用普通 JavaScript 创建了流体和动态流场动画。 HTML 画布的简单性与 JavaScript 的三角函数相结合，使我们能够构建这些令人着迷的视觉效果。

随意使用粒子数、颜色或流场公式来创建您自己的独特效果！

首页 > 编程 > 流场屏幕

流场屏幕

发布于2024-11-09

浏览：716

使用 Vanilla JS 和 HTML Canvas 的动态流场

您是否曾被抽象粒子动画迷住过？这些流动的动态视觉效果可以通过使用纯 JavaScript 和 HTML canvas 元素的极其简单的技术来实现。在本文中，我们将分解创建一个流场的过程，该流场可以为数千个粒子提供动画，让它们自然运动。

1. 设置项目

首先，我们需要三个文件：一个用于设置画布的 HTML 文件、一个用于样式设置的 CSS 文件以及一个用于处理逻辑的 JavaScript 文件。

解释：

• 我们定义一个 元素，所有动画都将在其中发生。
• styles.css 将链接到画布样式。
• 主要动画逻辑包含在script.js中。

---

2. 使用 CSS 设置画布样式

让我们添加一个简单的样式，为画布提供黑色背景，并确保删除所有内边距和边距。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

canvas {
    background-color: black;
}

解释：

• 将边距和填充设置为零可确保画布填满整个屏幕。
• 黑色背景为白色颗粒提供了良好的对比度。

---

3. 粒子类：创造魔法

Particle类是动画的核心所在。每个粒子在画布上移动，留下其过去位置的痕迹，创造流动的效果。

class Particle {
    constructor(effect) {
        this.effect = effect;
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.speedModifier = Math.floor(Math.random() * 5   1);
        this.history = [{ x: this.x, y: this.y }];
        this.maxLength = Math.floor(Math.random() * 200   10);
        this.timer = this.maxLength * 2;
        this.colors = ['#4C026B', '#8E0E00', '#9D0208', '#BA1A1A', '#730D9E'];
        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
    }

    draw(context) {
        context.beginPath();
        context.moveTo(this.history[0].x, this.history[0].y);
        for (let i = 1; i = 1) {
            let x = Math.floor(this.x / this.effect.cellSize);
            let y = Math.floor(this.y / this.effect.cellSize);
            let index = y * this.effect.cols   x;
            let angle = this.effect.flowField[index];

            this.speedX = Math.cos(angle);
            this.speedY = Math.sin(angle);
            this.x  = this.speedX * this.speedModifier;
            this.y  = this.speedY * this.speedModifier;

            this.history.push({ x: this.x, y: this.y });
            if (this.history.length > this.maxLength) {
                this.history.shift();
            }
        } else if (this.history.length > 1) {
            this.history.shift();
        } else {
            this.reset();
        }
    }

    reset() {
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.history = [{ x: this.x, y: this.y }];
        this.timer = this.maxLength * 2;
    }
}

解释：

• 构造函数：每个粒子都用随机位置和移动速度初始化。历史数组跟踪过去的位置以创建轨迹。
• draw()：该函数根据粒子的历史记录绘制粒子的路径。粒子留下彩色轨迹，增加视觉效果。
• update()：这里，通过计算与流场的角度来更新粒子的位置。速度和方向由三角函数控制。
• reset()：当粒子完成其轨迹时，它会重置到新的随机位置。

---

4.效果类：组织动画

Effect 类处理粒子的创建和流场本身，它控制粒子的运动。

class Effect {
    constructor(canvas) {
        this.canvas = canvas;
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.particles = [];
        this.numberOfParticles = 3000;
        this.cellSize = 20;
        this.flowField = [];
        this.curve = 5;
        this.zoom = 0.12;
        this.debug = true;
        this.init();
    }

    init() {
        this.rows = Math.floor(this.height / this.cellSize);
        this.cols = Math.floor(this.width / this.cellSize);
        for (let y = 0; y  {
            particle.draw(context);
            particle.update();
        });
    }
}

解释：

• 构造函数：初始化画布尺寸、粒子数量、流场。
• init()：通过组合每个网格单元的三角函数来计算流场的角度。该场影响粒子的移动方式。
• drawGrid()：绘制将画布划分为单元格的网格，调试时使用。
• render()：调用每个粒子的绘制和更新方法，以在画布上为粒子设置动画。

---

5. 通过动画循环让它变得栩栩如生

为了让一切正常工作，我们需要一个动画循环来不断清除画布并重新渲染粒子：

const effect = new Effect(canvas);

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    effect.render(ctx);
    requestAnimationFrame(animate);
}
animate();

解释：

• clearRect()：清除每一帧上的画布，以避免覆盖之前的帧。
• requestAnimationFrame：通过递归调用animate()函数来保持动画流畅。

---

结论

通过分解 Particle 和 Effect 类，我们仅使用普通 JavaScript 创建了流体和动态流场动画。 HTML 画布的简单性与 JavaScript 的三角函数相结合，使我们能够构建这些令人着迷的视觉效果。

随意使用粒子数、颜色或流场公式来创建您自己的独特效果！

版本声明 本文转载于：https://dev.to/ibra-kdbra/flow-field-screen-567c?1如有侵犯，请联系[email protected]删除

最新教程 更多>

• 

  哪种方法更有效地用于点 - 填点检测：射线跟踪或matplotlib \的路径contains_points？

  在Python 射线tracing方法 matplotlib路径对象表示多边形。它检查给定点是否位于定义路径内。 This function is often faster than the ray tracing approach, as seen in the code snippet pr...

  编程 发布于2025-02-19
• 

  如何在JavaScript对象中动态设置键？

  如何为JavaScript对象变量创建动态键，尝试为JavaScript对象创建动态键，使用此Syntax jsObj['key' i] = 'example' 1;将不起作用。正确的方法采用方括号：他们维持一个长度属性，该属性反映了数字属性（索引）和一个数字属性的数量。标准对象没有模仿这...

  编程 发布于2025-02-19
• 

  如何可靠地检查MySQL表中的列存在？

  在mySQL中确定列中的列存在，验证表中的列存在与与之相比有点困惑其他数据库系统。常用的方法：如果存在（从信息_schema.columns select * * where table_name ='prefix_topic'和column_name =&...

  编程 发布于2025-02-19
• 

  如何为PostgreSQL中的每个唯一标识符有效地检索最后一行？

  [2最后一行与数据集中的每个不同标识符关联。考虑以下数据： 1 2014-02-01 kjkj 1 2014-03-11 ajskj 3 2014-02-01 sfdg 3 2014-06-12 fdsa 为了检索数据集中每个唯一ID的最后一行信息，您可以在操作员上使用Postgres的有效效...

  编程 发布于2025-02-19
• 

  如何使用char_length（）在mySQL中按字符串长度对数据进行排序？

  [2使用内置的char_length（）函数。：返回字符串中的字符数，考虑多BYTE字符encoding（例如UTF-8）。 ] ：返回字符串占用的字节数，该字符的数量可能无法准确反映字符计数多字节编码。 [&& && && && && && &&华从指定的表格中的所有行，并根据指定列的字符长度按升...

  编程 发布于2025-02-19
• 

  如何检查对象是否具有Python中的特定属性？

  方法来确定对象属性存在寻求一种方法来验证对象中特定属性的存在。考虑以下示例，其中尝试访问不确定属性会引起错误： >>> a = someClass（） >>> A.property Trackback（最近的最新电话）： 文件“ ”，第1行， AttributeError：SomeClass实...

  编程 发布于2025-02-19
• 

  为什么尽管有效代码，为什么在PHP中捕获输入？

  [2 _post ['ss'];？>

  编程 发布于2025-02-19
• 

  在映射到MySQL枚举列时，如何确保冬眠保留值？

  在hibernate中保存枚举值：故障排除错误的列type ，他们各自的映射至关重要。在Java中使用枚举类型时，至关重要的是，建立冬眠的方式如何映射到基础数据库。在您的情况下，您已将MySQL列定义为枚举，并在Java中创建了相应的枚举代码。但是，您遇到以下错误：“ MyApp中的错误列类型。...

  编程 发布于2025-02-19
• 

  如何使用替换指令在GO MOD中解析模块路径差异？

  克服go mod中的模块路径差异 github.com/coreos/etcd/integration imports ：解析GO.mod：模块将其路径声明为： go.etcd.io/bbolt [&&&&&&&&&&&&&&&&&&&&&&&&&&&& github.com/coreos/b...

  编程 发布于2025-02-19
• 

  如何使用PHP从XML文件中有效地检索属性值？

  从php 您的目标可能是检索“ varnum”属性值，其中提取数据的传统方法可能会使您感到困惑。 - > attributes（）为$ attributeName => $ attributeValue）{ echo $ attributeName，'=“'，$ at...

  编程 发布于2025-02-19
• 

  Java是否允许多种返回类型：仔细研究通用方法？

  在java中的多个返回类型：一个误解介绍，其中foo是自定义类。该方法声明似乎拥有两种返回类型：列表和E。但是，情况确实如此吗？通用方法：拆开神秘 [方法仅具有单一的返回类型。相反，它采用机制，如钻石符号“ ”。分解方法签名： ：本节定义了一个通用类型参数，E。它表示该方法接受扩展FOO类的任何...

  编程 发布于2025-02-19
• 

  大批

  [2 数组是对象，因此它们在JS中也具有方法。 切片（开始）：在新数组中提取部分数组，而无需突变原始数组。 令ARR = ['a'，'b'，'c'，'d'，'e']; // USECASE：提取直到索引作...

  编程 发布于2025-02-19
• 

  在没有密码提示的情况下，如何在Ubuntu上安装MySQL？

  在ubuntu 使用debconf-set-selections 在安装过程中避免密码提示mysql root用户。这需要以下步骤： sudo debconf-set-selections

  编程 发布于2025-02-19
• 

  如何以不同的频率控制Android设备振动？

  控制使用频率变化的Android设备振动是否想为您的Android应用程序添加触觉元素？了解如何触发设备的振动器至关重要。您可以做到这一点：生成基本振动以生成简单的振动，使用振动器对象：这将导致设备在指定的持续时间内振动。许可要求通过上述技术，您可以创建在您的Android应用程序中自定义振动，以增...

  编程 发布于2025-02-19
• 

  如何克服PHP的功能重新定义限制？

  克服PHP的函数重新定义限制在PHP中，多次定义一个相同名称的函数是一个no-no。尝试这样做，如提供的代码段所示，将导致可怕的“不能重新列出”错误。 //错误：“ cance redeclare foo（）” 但是，PHP工具腰带中有一个隐藏的宝石：runkit扩展。它使您能够灵活地重新定义...

  编程 发布于2025-02-19

分类更多>

学日语 学韩语 学中文 学外语 游戏 常见问题 科技周边 人工智能 软件教程 编程 文章

学习中文

• 1 走路用中文怎么说？走路中文发音，走路中文学习
• 2 坐飞机用中文怎么说？坐飞机中文发音，坐飞机中文学习
• 3 坐火车用中文怎么说？坐火车中文发音，坐火车中文学习
• 4 坐车用中文怎么说？坐车中文发音，坐车中文学习
• 5 开车用中文怎么说？开车中文发音，开车中文学习
• 6 游泳用中文怎么说？游泳中文发音，游泳中文学习
• 7 骑自行车用中文怎么说？骑自行车中文发音，骑自行车中文学习
• 8 你好用中文怎么说？你好中文发音，你好中文学习
• 9 谢谢用中文怎么说？谢谢中文发音，谢谢中文学习
• 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning

工具更多>

图片base64 解编码

汉语拼音

Unicode编码

JS混淆加密压缩

URL网址16进制加密工具

UTF-8编码转换工具

在线Ascii编码解码工具

MD5加密工具

散列/哈希 文字在线加密解密工具

在线SHA加密