html5 canvas雨点打到窗玻璃动画

时间：2021-12-14 08:46:00

html5 canvas雨点打到窗玻璃动画

HTML5下雨效果

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

html5 canvas雨点打到窗玻璃动画

以下是代码：

 <!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. 8个经典炫酷的HTML5 Canvas动画欣赏

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

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

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

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

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

  6. HTML5 Canvas核心技术图形动画与游戏开发 &lpar;&lpar;美&rpar;David Geary&rpar; 中文PDF扫描版&ZeroWidthSpace;

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

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

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

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

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

  9. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

随机推荐

  1. mysql环境搭建

    最近决定学习数据库,在比较了各个数据库之后,选择从mysql入手,主要原因: 开源 成熟,通用 用户量多,社区完善 入门简单 下载安装 mysql的官网下载地址:http://dev.mysql.co ...

  2. 源程序出现各种奇怪的符号P

    依次展开Windows->Preferences->General->Editors->Text Editor 将右边的Show whitespace characters的复 ...

  3. windows渗透被人忽视的一些小命令

    cmdkey /list 可以列出域内网之间可用的凭据. wmic   useraccount get name,sid gpresult /r

  4. 深入了解webservice&lowbar;概念总结

    最近公司需要对java web端的第三方接口进行测试,使用WebService+TestNG实现,TsetNg是常用的自动化测试框架,这就不介绍了. WebService是一种跨编程语言和跨操作系统平 ...

  5. Spring MVC防止数据重复提交

    现实开发中表单重复提交的例子很多,就包括手上这个门户的项目也有这种应用场景,用的次数多,但是总结,这还是第一次. 一.基本原理 使用token,给所有的url加一个拦截器,在拦截器里面用java的UU ...

  6. android 4&period;0 中出错 java&period;lang&period;UnsupportedOperationException

    在android4.0中  画图的时候使用: canvas.clipPath(path, Region.Op.XOR); 报错 java.lang.UnsupportedOperationExcept ...

  7. mysql change master导致gtid丢失

    change master导致gtid丢失从innobackupex恢复导致binlog的拉取位置会导致主备gtid不一致.此类错误通过构造空事务方式无法修复.此时就需要change master 方 ...

  8. 破损的键盘 （Broken Keyboard）--又名悲剧文本（线性表）

     题目: 你有一个破损的键盘.键盘上的所有键都可以正常工作,但有时Home键或者End键会自 动按下.你并不知道键盘存在这一问题,而是专心地打稿子,甚至连显示器都没打开.当你 打开显示器之后, 展现在 ...

  9. mybatis&lowbar;10关联查询&lowbar;一对多

    在使用mybatis框架的时候,很多时候需要一个查询结果里的属性包含多个对象,即一条查询结果有属性是集合,这个时候就需要使用collection标签 模型里面有集合 案例: 第一步:在Orders中添 ...

  10. MATLAB——textscan

    %读取带变量名的数据集的程序,寇文红2007年5月24日于畅春园. %这是一个读取数据集的程序,目的是把如下带变量名的数据矩阵读进MATLAB.% <DTYYYYMMDD>,<TIM ...

相关文章