目录
- 一.简介
- 二.安装方式
- 三、使用方式
- 四、构造函数参数说明
内容
由于录屏软件的工作会导致网页渲染贞率降低，所以教程中的 gif 动画中特效延迟较明显，而在实际中是没有这种明显的延迟的！
一、简介
snowjs 是一个雪花效果的插件；通过使用 Canvas 来显现雪花效果，支持与雪花交互；
示例效果
雪花示例效果
雪花交互效果
如果您在使用该库的过程中有遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：
- 邮箱：guobinyong@qq.com
- QQ：guobinyong@qq.com
- 微信：keyanzhe
二、安装方式
目前，安装方式有以下几种：
方式1：通过 npm 安装
npm install --save snowjs
方式2：直接下载原代码
您可直接从 本项目的Git仓库 下载，此仓库里包含了 snowjs 和 下文的示例代码；snowjs 库是 本项目的Git仓库 项目中的 package/Snow.js 文件，您可以直接把该文件拷贝到您的项目中去；然后使用如下代码在您的项目中引入 Snow：
import { Snow } from "path/to/Snow.js";
或者
import Snow from "path/to/Snow.js";
三、使用方式
-
创建 Snow 对象：
let snow = new Snow(canvasID, width, height); -
启动雪花效果：
snow.start();
四、构造函数参数说明
构造函数 Snow 的参数如下：
(canvasID, width, height, flakeCount, minFlakeRadius, maxFlakeRadius ,minSpeed,maxSpeed,affect,affectRadius)
- @param canvasID : string canvas元素的id标识符
- @param width : number 默认值：window.innerWidth 画面的宽度;
- @param height : number 默认值: window.innerHeight 画面的高度
- @param flakeCount : number 默认值是：500 雪花的数量
- @param minFlakeRadius : number 默认值:1 雪花的最小半径
- @param maxFlakeRadius : number 默认值:3 雪花的最大半径
- @param minSpeed : number 默认值: 0.5 雪花下落的最小速度
- @param maxSpeed : number 默认值: 2.5 雪花下落的最大速度
- @param affect : bool 默认值: false 是否开启触摸影响雪花
- @param affectRadius : number 默认值: 100 影响半径
