Particles.js入门: 用于创建粒子系统的JavaScript库

Particles.js 是用来在网页上创建粒子效果的轻量级JavaScript库,基于HTML5 Canvas。可以设置粒子的形状、旋转、分布、颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针。

下面介绍一下Particles.js的基本使用,其实,Particles.js的使用非常简单。

# 安装和使用

导入Particles.js,你可以使用自己的服务器或使用别人提供的:

第一个粒子系统示例:

效果:

粒子默认为白色,粒子之间使用白线连接。点击上面的粒子系统会生成4个新的粒子。

# 自定义参数

上面的粒子系统使用的是默认参数,你也许想更改粒子的形状、大小和粒子密度。particlesJS是接受参数的,语法如下:

dom-id是要显示粒子的dom元素;path-json是包含粒子设置的json文件路径,也可以直接把json代码传入;callback是可选参数。

第二个粒子系统示例:下雪效果

代码:

json参数文件:

上面的interactivity没有设置参数,它是用来处理用户交互的,如:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注