# 雪花

**Repository Path**: guobinyong/Snowflake

## Basic Information

- **Project Name**: 雪花
- **Description**: 封装的一个雪花效果的库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2017-12-17
- **Last Updated**: 2023-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


[本项目的Git仓库]: https://gitee.com/guobinyong/Snowflake
[雪花示例效果]: ./assets/雪花示例效果.gif
[雪花交互效果]: ./assets/雪花交互效果.gif



目录
=======================
- 一.简介
- 二.安装方式
- 三、使用方式
- 四、构造函数参数说明


内容
================

> 由于录屏软件的工作会导致网页渲染贞率降低，所以教程中的 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";
```



# 三、使用方式

1. 创建 Snow 对象：
   ```
   let snow = new Snow(canvasID, width, height);
   ```

2. 启动雪花效果：
   ```
   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     影响半径