目录

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

内容

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