分享一个插件实现水珠自动下落效果


Posted in Javascript onJune 01, 2016

分享一个水珠自动下落的插件,下载地址:https://github.com/foreverjiangting/rainyday.js

下面来看看如何使用它?添加下面代码即可运行它。

实现效果如下:

分享一个插件实现水珠自动下落效果

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function runImage()
{
var image=document.getElementById("img");
image.src="4.jpg";
image.onload=function()
{
//设定一个rain对象
var engine=new RainyDay({image:this,}); //调用rain函数
engine.rain([[4,6,8000]]);//设定雨滴大小4,6 数量为8000 ||也可为 engine.rain([[6,8000]]),此时水珠的大小较小
engine.rain([[3,3,0.88],[5,5,0.9],[6,2,1]],100);//设定雨滴重复时间
}
// image.crossOrigin="jt"; 加载跨域图片 
}
</script>
</head>
<body onload="runImage();" >
<div class="rain">
<img src="4.jpg" id="img" alt="点击图片">
</div>
<script type="text/javascript" src="rainy.js"></script> 
</body>
</html>

下面来研究下rainy.js部分代码,源代码见上面的github里面的:

RainyDay.prototype.rain = function(presets, speed) {
// 准备canvas 进行下落映射
if (this.reflection !== this.REFLECTION_NONE) {
this.prepareReflections();
}
this.animateDrops();
// 动画
this.presets = presets;
this.PRIVATE_GRAVITY_FORCE_FACTOR_Y = (this.options.fps * 0.001) / 25;
this.PRIVATE_GRAVITY_FORCE_FACTOR_X = ((Math.PI / 2) - this.options.gravityAngle) * (this.options.fps * 0.001) / 50;
// 准备下落的模型
if (this.options.enableCollisions) {
// 计算最大的下落水珠圆角
var maxDropRadius = 0;
for (var i = 0; i < presets.length; i++) {
if (presets[i][0] + presets[i][1] > maxDropRadius) {
maxDropRadius = Math.floor(presets[i][0] + presets[i][1]);
}
}
if (maxDropRadius > 0) {
// 初始化下落的模型
var mwi = Math.ceil(this.canvas.width / maxDropRadius);
var mhi = Math.ceil(this.canvas.height / maxDropRadius);
this.matrix = new CollisionMatrix(mwi, mhi, maxDropRadius);
} else {
this.options.enableCollisions = false;
}
}
for (var i = 0; i < presets.length; i++) {
if (!presets[i][3]) {
presets[i][3] = -1;
}
}
var lastExecutionTime = 0;
this.addDropCallback = function() {
var timestamp = new Date().getTime();
if (timestamp - lastExecutionTime < speed) {
return;
}
lastExecutionTime = timestamp;
var context = this.canvas.getContext('2d');
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.background, 0, 0, this.canvas.width, this.canvas.height);
// 选择匹配的模型
var preset;
for (var i = 0; i < presets.length; i++) {
if (presets[i][2] > 1 || presets[i][3] === -1) {
if (presets[i][3] !== 0) {
presets[i][3]--;
for (var y = 0; y < presets[i][2]; ++y) {
this.putDrop(new Drop(this, Math.random() * this.canvas.width, Math.random() * this.canvas.height, presets[i][0], presets[i][1]));
}
}
} else if (Math.random() < presets[i][2]) {
preset = presets[i];
break;
}
}
if (preset) {
this.putDrop(new Drop(this, Math.random() * this.canvas.width, Math.random() * this.canvas.height, preset[0], preset[1]));
}
context.save();
context.globalAlpha = this.opacity;
context.drawImage(this.glass, 0, 0, this.canvas.width, this.canvas.height);
context.restore();
}
.bind(this);
};

这里我想提到关于跨域资源的问题,image.crossOrigin="jt"; 加载跨域图片。刚开始我用的是跨域的图片,但出现问题了,然后我就使用本地的图片加载,即 src="4.jpg" ,就没问题了。其实如果你要使用跨域的图片,只要加上image.crossOrigin="jt"; 这句代码就可以了。

(前提是服务器开了允许的权限)

这里涉及到CORS的问题,我们来看下: CORS全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器

发出xmlhttprequest请求从而克服了AJAX只能同源使用的限制。

我们还用上面的列子来看问题:

<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function runImage()
{
var image=document.getElementById("img");
image.onload=function()
{
//设定一个rain对象
var engine=new RainyDay({image:this,});
engine.rain([[4,6,8000]]);//设定雨滴大小4,6 数量为8000
engine.rain([[3,3,0.88],[5,5,0.9],[6,2,1]],100);//设定雨滴重复时间
}
// image.crossOrigin="jt"; //跨域图片
image.src="http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg"; 
}
</script>
</head>
<body onload="runImage();" >
<div class="rain">
<img src="http://img0.imgtn.bdimg.com/it/u=938096994,3074232342&fm=21&gp=0.jpg" id="img" alt="点击图片">
</div>
<script type="text/javascript" src="rainy.js"></script>
</body>
</html>

我们来看下调试控制台里面的信息:

Accept 
image/png,image/*;q=0.8,*/*;q=0.5
Accept-Encoding 
gzip, deflate
Accept-Language 
zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.3
Connection 
keep-alive
Host 
img0.imgtn.bdimg.com
Origin null ---上面的头信息中,Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值决定是否同意这次请求.不在许可范围内。服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。 GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0. User-Agent 
Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0

如果Origin指定的域名在许可范围内,服务器返回的响应,会多出几个头信息字段。

以上内容是小编给大家分享的一个插件实现水珠自动下落效果 ,希望大家喜欢!

Javascript 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
js匿名函数作为函数参数详解
Jun 01 #Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 #Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 #Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 #Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 #Javascript
JS未跨域操作iframe里的DOM
Jun 01 #Javascript
jQuery实现的简单分页示例
Jun 01 #Javascript
You might like
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
python实现划词翻译
2020/04/23 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python实现三维拟合的方法
2018/12/29 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
什么是设计模式
2012/06/17 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
用Python创建简易网站图文教程
2021/06/11 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技