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


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 相关文章推荐
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
jquery中radio checked问题
Mar 16 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
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
星际争霸兵种名称对照表
2020/03/04 星际争霸
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python中的装饰器用法详解
2015/01/14 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
优秀毕业生事迹材料
2014/02/12 职场文书
电视购物广告词
2014/03/19 职场文书
设计专业自荐信
2014/06/19 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
死者家属慰问信
2015/03/24 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书