html5 canvas雨点打到窗玻璃动画
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雨点打到窗玻璃动画的更多相关文章
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- HTML5 Canvas 梦幻的文字飞扬动画教程
之前为大家介绍了一款HTML5/CSS3 3D文字特效 文字外翻效果.今天为大家带来的是html5 canvas实现的文字漂动动画效果.画面非常梦幻. 在线预览 源码下载 实现代码如下: html ...
- HTML5 Canvas 超逼真烟花绽放动画
各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版
<html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
随机推荐
- dubbo通信协议之对比
对dubbo的协议的学习,可以知道目前主流RPC通信大概是什么情况,本文参考dubbo官方文档 http://dubbo.io/User+Guide-zh.htm dubbo共支持如下几种通信协议: ...
- Turn off swi-prolog protocol output of ANSI terminal control sequences
To save a record of program execution in prolog, we use the special predicates: protocol and noproto ...
- struts2:拦截器
拦截器(Interceptor)是Struts 2的核心组件,Struts 2框架的大部分功能都是通过拦截器来完成的,例如数据校验,国际化,文件上传和下载等.为了实现这些功能,Struts 2框架提供 ...
- json date convert
function getDateTime(jsondate) { var date = new Date(parseInt(jsondate.replace("/Date(", & ...
- 自定义圆环progressbar
RoundProgressBar.java /** * RoundProgressBar.java [v1.0.0] * classes: com.example.audiorecordingtest ...
- 十分钟理解Gradle
一.什么是Gradle 简单的说,Gradle是一个构建工具,它是用来帮助我们构建app的,构建包括编译.打包等过程.我们可以为Gradle指定构建规则,然后它就会根据我们的“命令”自动为我们构建ap ...
- VS2012文本编辑器鼠标不能滚动
- Amazon的Fire Phone之于Android开发者
在上周Amazon也耐不住加入了手机竞争行列之中,发布了自己的Fire Phone,于是Android家族又多了一位变种成员,Android系统的碎片化程度也进一步加剧.因为工作的关系,我有幸在上个月 ...
- 在UWP应用中实现Gif播放
众所周知,在UWP应用框架中,Image控件是无法播放GIF的图片,只能显示静态图,这样的体验不是特别友好.我在Win8.WP8.1的时候实现过gif播放功能,但是最近发现性能和播放效果都差强人意,大 ...
- 使用before、after伪类制作三角形
使用before.after伪类实现三角形的制作,不需要再为三角形增加不必要的DOM元素,影响阅读. <!DOCTYPE html><html><head> ...