rainyday.js 下雨效果插件使用方法

插件介绍
rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单，易于集成。Rainyday.js是一个使用HTML5特性的纯js库，几乎所有的现代浏览器都支持它。

简要教程

rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件。该雨滴效果插件的特点是使用简单，易于集成。

使用方法

在页面中引入rainyday.js文件。

<script src="js/rainyday.js"></script>

然后可以按照下面的方法调用插件。

var engine = new RainyDay({image: element,         // Image element// This value is requiredparentElement: someDiv, // Element to be used as a parent for the canvas// If not provided assuming the 'body' elementcrop: [0, 0, 50, 60],   // Coordinates if only a part of the image should be used// If not provided entire image will be usedblur: 10,               // Defines blur due to rain effect// Assuming 10 if not provided// Use 0 value to disable the bluropacity: 1              // Opacity of rain drops// Assuming 1 if not provided
});
engine.rain([[1, 0, 20],         // add 20 drops of size 1...[3, 3, 1]           // ... and 1 drop of size from 3 - 6 ...],                       100);                   // ... every 100ms

配置参数

image：模拟玻璃窗的图片元素，必须填写。
parentElement：canvas的父元素，如果不提供则默认为body。
crop：如果只使用图像的某一部分，用此参数提供坐标。如果不提供则默认为整幅图片。
blur：定义模糊的下雨雨滴效果。如果不提供值，默认为10。设置为0表示无模糊效果。
opacity：定义雨滴的透明度。如果不提供默认为1。

rainyday.js 下雨效果插件使用方法相关推荐

Intro.js 分步向导插件使用方法 1
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84181455 简介为您的网站和项目提供一步 ...
使用rainyday.js插件制作雨滴效果
插件介绍 rainyday是一款基于 html5 canvas 的模拟下雨时雨滴打在玻璃窗上效果的js插件.该雨滴效果插件的特点是使用简单,易于集成.Rainyday.js是一个使用HTML5特性的纯 ...
html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
astar插件下载就行_PS模拟下雨插件下载一键为照片添加下雨效果小伙伴们收货啦...
今天整理文件,找出来一个挺好玩的PS扩展插件,BBtools出品的模拟下雨插件,可以为照片添加下雨效果,其实就是一些动作的整合,不过偶尔用用还是挺有意思的,插件可以手动控制下雨的角度.密度.风速.雨量 ...
html图片百叶窗轮播,纯js百叶窗效果轮播图插件
这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法在页面中引入imgSwitch.min.js ...
推荐几个比较有意思的js效果插件
推荐几个比较有意思的js效果插件 wow.js 数字累加插件 CounterUp wow.js 这个东西很有意思,具体怎么有意思呢,就是你可以用很简单的方法引用它,然后通过加类名的方法就可以让你的网页 ...
cdn加载插件和npm安装的差别_web开发：打字机效果插件Typed.js
本文同步发表在我的个人博客中: 沧沧凉凉www.cclliang.com 打字机效果是非常酷的文字显示效果,视觉表现极佳,而通过Typed.js可以很简单的在web开发中实现打字机效果. 1. 官网 ...
js制作的模拟超逼真下雨效果
一层秋雨一层凉. 小楼一夜听春雨. 虞美人·听雨少年听雨歌楼上.红烛昏罗帐.壮年听雨客舟中.江阔云低.断雁叫西风. 而今听雨僧庐下.鬓已星星也.悲欢离合总无情.一任阶前.点滴到天明. 我是那迷恋微雨 ...
摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...

rainyday.js 下雨效果插件使用方法

简要教程

使用方法

配置参数

rainyday.js 下雨效果插件使用方法相关推荐

最新文章

热门文章