canvas教程

HTML5 canvas制作逼真的下雨雨滴效果js插件

字号+ 作者:H5之家 来源:H5之家 2017-03-19 16:03 我要评论( )

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

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

使用方法

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

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

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

var engine = new RainyDay({ image: element, // Image element // This value is required parentElement: someDiv, // Element to be used as a parent for the canvas // If not provided assuming the 'body' element crop: [0, 0, 50, 60], // Coordinates if only a part of the image should be used // If not provided entire image will be used blur: 10, // Defines blur due to rain effect // Assuming 10 if not provided // Use 0 value to disable the blur opacity: 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 配置参数 浏览器兼容

Rainyday.js是一个使用 HTML5 特性的纯js库,几乎所有的现代浏览器都支持它。

效果预览

下面是Rainyday几种效果的截图:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 为什么使用html5的十大原因!!!

    为什么使用html5的十大原因!!!

    2017-03-19 12:00

  • 基于html5 canvas实现漫天飞雪效果实例

    基于html5 canvas实现漫天飞雪效果实例

    2017-03-18 17:00

  • 基于HTML5 Canvas的网页画板实现教程

    基于HTML5 Canvas的网页画板实现教程

    2017-03-18 08:00

  • HTML5开发手机App之:HTML5系统教程

    HTML5开发手机App之:HTML5系统教程

    2017-03-18 08:00

网友点评
/