<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>唯美雨落</title>
<meta name="Keywords" content="关键词1,关键词2">
<meta name="description" content="网页的描述内容">
<!--响应式mate标签-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<base target="_blank"/> <style>
</style>
</head>
<body> <canvas id="canvas" style="position: absolute; top: 0px; left: 0px; opacity: 0.58;" width="1366" height="216"></canvas> <script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"> var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var clearColor = 'rgba(0, 0, 0, 0.1)';
var max = 60;
var drops = []; function random(min, max) {
return Math.random() * (max - min) + min;
} function randomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb("+r+","+g+","+b+")";//IE7不支出rgb
}; function O() {}
O.prototype = {
init: function() {
this.x = random(0, w);
this.y = 0;
this.color = randomColor();
this.w = 2;
this.h = 1;
this.vy = random(4, 5);
this.vw = 3;
this.vh = 1;
this.size = 2;
this.hit = random(h * .8, h * .9);
this.a = 0.5;
this.va = .96;
},
draw: function() {
if (this.y > this.hit) {
ctx.beginPath();
ctx.moveTo(this.x, this.y - this.h / 2);
ctx.bezierCurveTo(
this.x + this.w / 2, this.y - this.h / 2,
this.x + this.w / 2, this.y + this.h / 2,
this.x, this.y + this.h / 2); ctx.bezierCurveTo(
this.x - this.w / 2, this.y + this.h / 2,
this.x - this.w / 2, this.y - this.h / 2,
this.x, this.y - this.h / 2); ctx.strokeStyle = 'hsla(180, 100%, 50%, '+this.a+')';
ctx.stroke();
ctx.closePath(); } else {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size * 5);
}
this.update();
},
update: function() {
if(this.y < this.hit){
this.y += this.vy;
} else {
if(this.a > .03){
this.w += this.vw;
this.h += this.vh;
if(this.w > 100){
this.a *= this.va;
this.vw *= .98;
this.vh *= .98;
}
} else {
this.init();
}
} }
} function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
} function setup(){
canvas.style.opacity = "0.58";
for(var i = 0; i < max; i++){
(function(j){
setTimeout(function(){
var o = new O();
o.init();
drops.push(o);
}, j * 100)
}(i));
}
} function anim() {
ctx.fillStyle = clearColor;
ctx.fillRect(0,0,w,h);
for(var i in drops){
drops[i].draw();
}
requestAnimationFrame(anim);
} window.addEventListener("resize", resize); setup();
anim(); </script>
</body> </html>

效果图:

IT技术和行业交流群 417691667

随机推荐

  1. 读取XML直接转换为类对象

    <?xml version="1.0" encoding="utf-8"?> <ArrayOfMenuItems xmlns:xsi=&quo ...

  2. hdoj 5371 Hotaru&#39;s problem

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5371 这道题用到了Manacher算法,首先简单介绍一下Manacher算法: ----------- ...

  3. Linux Oracle服务启动&amp;停止脚本与开机自启动

    在CentOS 6.3下安装完Oracle 10g R2,重开机之后,你会发现Oracle没有自行启动,这是正常的,因为在Linux下安装Oracle的确不会自行启动,必须要自行设定相关参数,首先先介 ...

  4. java regex possissive relunctant

    Java正则表达中Greedy Reluctant Possessive 的区别 分类: java 2015-01-16 00:28 1588人阅读 评论(9) 收藏 举报 正则表达式Java 目录( ...

  5. iOS 数据储存--SQLite 操作数据库-FMDB,sqlite数据类型,保存图片,demo

    1.SQLite 语句中 数据类型的储存 /* 不区分大小写 char(长度).字符串 NULL. 空值 INTEGER. 整型 REAL.浮点型 TEXT.文本类型 BLOB. 二进制类型,用来存储 ...

  6. python selenium 模块

    控制已打开的浏览器 https://www.cnblogs.com/lovealways/p/9813059.html selenium.自动填充文本框.自动点按钮 https://blog.csdn ...

  7. 8、Python-函数

    定义 def printInfo(): print("人生苦短,我用Python") 调用 def printInfo(): print("人生苦短,我用Python&q ...

  8. 一篇采访窥C#的未来

    今天坐公交时用手机打开 .NET Blog 阅读这周的 The week in .NET ,在看 Virtual Panel: What's Next for .NET? 这篇采访报道时,被其中对 R ...

  9. [CodeForces - 197E] E - Paint Tree

    E - Paint Tree You are given a tree with n vertexes and n points on a plane, no three points lie on ...

  10. kali安全工具

    http://www.kali.org.cn/ Kali linux下载安装 (27) kali linux是backtrack的最新代号,或者叫新版本的backtrack,欢迎下载使用. 908 / ...