html5 canvas雨点打到窗玻璃动画

HTML5下雨效果

效果预览：http://hovertree.com/texiao/html5/4.htm

以下是代码：

 <!doctype html>

 <html lang="zh">

 <head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>HTML5 Canvas雨滴下落动画DEMO演示 - 何问起</title><base target="_blank" />

 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/4/hovertreemalize.css" />

 <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/4/hovertreerain.css">

 <style media="screen">

 body {

 overflow: hidden;

 height: 100%;

 margin: 0;

 padding: 0;

 }

 img {

 width: 100%;

 height: 100%;

 }

 </style>

 <script src="http://hovertree.com/texiao/html5/4/rainyday.min.js"></script>

 <script>

 function run() {

 var image = document.getElementById('background');

 image.onload = function() {

 var engine = new RainyDay({

 image: this

 });

 engine.rain([ [0, 2, 200], [3, 3, 1] ], 100);

 };

 image.crossOrigin = 'anonymous';

 image.src = 'http://hovertree.com/texiao/html5/4/hovertree3.jpg';

 }

 </script>

 <!--[if IE]>

 <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>

 <![endif]-->

 </head>

 <body onLoad="run();">

 <header class="htmleaf-header">

 <div class="htmleaf-demo center">

 <a href="http://hovertree.com">何问起</a>

 <a href="http://www.baidu.com/baidu?word=%E5%A4%A9%E6%B0%94+&ie=utf-8&tn=bds&cl=3&ct=2097152&si=hovertree.com&s=hovertree.com" class="current">天气预报</a>

 <a href="http://hovertree.com/texiao/">特效</a>

 <a href="http://hovertree.com/hvtart/bjae/a6w6e2qg.htm">原文</a>

 <br />下雨了，记得收衣服关窗户，出门带雨伞

 </div>

 </header>

 <img id="background" alt="background" src="" />

 </body>

 </html>

天气预报

特效： http://www.cnblogs.com/roucheng/p/texiao.html

html5 canvas雨点打到窗玻璃动画的更多相关文章

  1. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  2. HTML5 Canvas 梦幻的文字飞扬动画教程

    之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览   源码下载 实现代码如下: html ...

  3. HTML5 Canvas 超逼真烟花绽放动画

    各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...

  4. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  5. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  6. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  7. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  8. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

随机推荐

  1. JAVA中堆栈和内存分配原理

    1.栈.堆 1.寄存器:最快的存储区, 由编译器根据需求进行分配,我们在程序中无法控制.2. 栈:存放基本类型的变量数据和对象的引用,但对象本身不存放在栈中,而是存放在堆(new 出来的对象)或者常量 ...

  2. Win7 安装Apache 2.2.4报错：<OS 5>拒绝访问. :Failed to open the WinNT service manager

    Apache 2.2安装档与win7的“用户账户控制”冲突,所以只要先关闭,安装完后再开启即可. 重启,然后再重新安装Apache2.2.4,没有出现错误.然后再把上述设置改回去. 参考:http:/ ...

  3. golang append

    1) Append a slice b to an existing slice a: a = append(a, b...) 2) Copy a slice a to a new slice b: ...

  4. 对已经add的文件不在跟踪

    记录每次更新到仓库 现在我们手上已经有了一个真实项目的 Git 仓库,并从这个仓库中取出了所有文件的工作拷贝.接下来,对这些文件作些修改,在完成了一个阶段的目标之后,提交本次更新到仓库. 请记住,工作 ...

  5. linq join多字段

    from VS in m2db.Inf_VehicleSale join RS1 in m2db.His_RecSale on new { VS.vehicleCode, auctionCode=VS ...

  6. Twig模版语言入门

    转自 :http://pengbotao.cn/twig-template-language.html Twig中有两种定界符{% ... %} 和 {{ ... }} , 前一种用来执行语句,比如f ...

  7. python 字符串相加

    我们通过操作符号+来进行字符串的相加,不过建议还是用其他的方式来进行字符串的拼接,这样效率高点. 原因:在循环连接字符串的时候,他每次连接一次,就要重新开辟空间,然后把字符串连接起来,再放入新的空间, ...

  8. 安卓开发笔记——关于照片墙的实现（完美缓存策略LruCache+DiskLruCache）

    这几天一直研究在安卓开发中图片应该如何处理,在网上翻了好多资料,这里做点小总结,如果朋友们有更好的解决方案,可以留言一起交流下. 内存缓存技术 在我们开发程序中要在界面上加载一张图片是件非常容易的事情 ...

  9. 【转载】C#之int与Java之Integer的区别

    本文涉及到一些JVM原理和Java的字节码指令,推荐感兴趣的读者阅读一本有关JVM的经典书籍<深入Java虚拟机(第2版)>,将它与我在<.NET 4.0面向对象编程漫谈>中介 ...

  10. java---Swing界面开发总结

    一.java的图形界面 1.awt    java.awt jdk1.4之前推出的图形界面,用c/c++编写,跨平台性不好 2.swing  javax.swing jdk1.4时推出的图形界面,跨平 ...