流场屏幕

百变鹏仔 4天前 #JavaScript

文章标签屏幕

使用 vanilla js 和 html canvas 的动态流场

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

1. 设置项目

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

    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flow fields</title><link rel="stylesheet" href="styles.css"><canvas id="canvas1"></canvas><script src="script.js"></script>

解释：

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 &gt; this.maxlength) {                this.history.shift();            }        } else if (this.history.length &gt; 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;    }}

解释：

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

解释：

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

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

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

解释：

结论

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

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

文章推荐

流场屏幕

使用 vanilla js 和 html canvas 的动态流场

1. 设置项目

解释：

2. 使用 css 设置画布样式

解释：

3. 粒子类：创造魔法

解释：

4.效果类：组织动画

解释：

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

解释：

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？