使用 vanilla js 和 html canvas 的动态流场
您是否曾被抽象粒子动画迷住过？这些流动、动态的视觉效果可以通过使用纯 javascript 和 html canvas 元素的极其简单的技术来实现。在本文中，我们将分解创建一个流场的过程，该流场为数千个粒子提供动画，让它们自然运动。
1. 设置项目
首先，我们需要三个文件：一个用于设置画布的 html 文件、一个用于样式设置的 css 文件以及一个用于处理逻辑的 javascript 文件。
flow fields
解释：
我们定义一个 元素，所有动画都将在其中发生。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 < 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 { 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 的三角函数相结合，使我们能够构建这些令人着迷的视觉效果。
随意使用粒子数、颜色或流场公式来创建您自己的独特效果！
以上就是流场屏幕的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1492979.html
微信扫一扫 
支付宝扫一扫 
