欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

炫酷多彩的粒子效果——canvas实现前端页面背景点缀

程序员文章站 2022-05-29 07:51:55
...

这里就直接上图吧~
炫酷多彩的粒子效果——canvas实现前端页面背景点缀
炫酷多彩的粒子效果——canvas实现前端页面背景点缀
炫酷多彩的粒子效果——canvas实现前端页面背景点缀

  • 如果想使用的话非常简单,加载我写好的js文件引入就行了,具体代码和操作可以访问项目的github,readme文档我都写得非常清晰了:https://github.com/Chacha-Bing/rainbow-particles
  • 瞅一眼可配置项:
new Rainbow({
     max_age : 粒子可达的最长寿命,也就是粒子的最大历程,此值越大,粒子的平均路径越长,
     part_count : 一簇粒子的数量,界面总粒子数为此值*4,注意过大会卡顿,
     frame_rate : 粒子在一帧内可达的路径距离,视效上来说,此值越大/小,粒子速度越快/,
     top_left_color : 上左簇粒子颜色,可以用rgb形式或十六进制(必须是字符串),下同,
     top_right_color : 上右簇粒子颜色,
     bottom_left_color : 下左簇粒子颜色,
     bottom_right_color : 下右簇粒子颜色
   })