<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Water drops effect</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="http://www.yyyweb.com/demo/common/init.css">
<style>
body {
margin-top: 25px;
}
.top-banner {
background-color: #666;
}
#water {
height: 330px;
}
.example {
margin-top: 50px;
}
</style>
<script src="js/vector2d.js" type="text/javascript" charset="utf-8"></script>
<script src="js/waterfall.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="example">
<canvas id="water">HTML5 compliant browser required</canvas>
<div id="switcher">
<img onclick='watereff.changePicture(this.src);' src="data_images/underwater1.jpg" />
<img onclick='watereff.changePicture(this.src);' src="data_images/underwater2.jpg" />
</div>
<div id="fps"></div>
</div>
<div class="footer-banner" style="width:728px; margin:0px auto"></div>
<script src="http://www.yyyweb.com/demo/common/jquery.min.js"></script>
<script src="http://www.yyyweb.com/demo/common/init.js"></script>
</body>
</html>
使用 HTML5 Canvas 制作水波纹效果
4星 · 超过85%的资源 需积分: 50 156 浏览量
2014-09-19
09:19:13
上传
评论 2
收藏 70KB RAR 举报 
water-drops.rar （7个子文件） 
css 
main.css 417B data_images 
underwater1.jpg 40KB underwater2.jpg 45KB 前端里-专注 Web 开发技术和资源分享.url 111B
index.html 1KB js vector2d.js 1KB waterfall.js 4KB资源评论
qimuzhang2016-12-29还不错~高手写的算法很高级
Maggiecyp2016-12-30可惜不是需要的那种效果
