当前位置:主页 > JavsScript库 > 动画 >

JavaScript中实现美丽的星星落下背景 - starback.js
栏目分类:动画   发布日期:2021-08-27   浏览次数:

一个无依赖的 JavaScript 库,用于创建高度可定制的星星坠落效果,可用作任何容器的背景。

使用:

1. 安装并导入starback.jswith NPM。

# NPM
$ npm i starback --save
import Starback from 'starback'

2. 或加载starback.jsfromdist文件夹。

<script src="dist/starback.js"></script>

3. 创建一个 <canvas> 元素,库在该元素上呈现星落效果。

<canvas id="canvas"></canvas>

4. 创建一个新的starback实例如下:

const starback = new Starback(canvas, {
      // 这里的选项
})

5. 指定要生成的星星数。就是这样

starback.generateStar(30)

6. 自定义画布。

const starback = new Starback(canvas, {
      // 画布的宽度/高度
      width: 800,
      height: 600,
      // 画布的背景颜色
      // 也可以是线性渐变的颜色数组
      backgroundColor: "#ccc",
})

7. 自定义星星坠落效果。

const starback = new Starback(canvas, {
      // 动画速度
      speed: .5, 
      // 星星颜色数组
      starColor: ["#fb00ff", "#00dde0"], 
      // 最大星星数
      maxStar: 200,
      // 以像素为
      starSize: 100,
      // 1 = 从上到下,2 = 从下到上
      directionY: 1, 
      // 1 = 从左到右,2 = 从右到左
      directionX: 1,
      // 当前起点 X 的
      distanceX: .1, 
      // 将应用于星星的二次曲线坐标
      slope: { x: 1, y: 1 },
      // 星星的频率将被旋转
      frequency: 10,
      // 星星的传播级别
      spread: 1,
      // 对星星应用随机不透明度
      randomOpacity: false,
      // 显示 FPS
      showFps: false
})

8更多的API方法。

starback.addToFront(callback(ctx))
starback.addToBehand(callback(ctx))


官方网站:https://github.com/zuramai/starback.js

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库