首页 > 代码库 > 如何使用 HTML5 Canvas 制作水波纹效果

如何使用 HTML5 Canvas 制作水波纹效果

2024-07-22 12:16:36   218人阅读

　　今天，我们继续分享 JavaScript 实现的效果例子，这篇文章会介绍使用 JavaScript 实现水波纹效果。水波效果以图片为背景，点击图片任意位置都会触发。有时候，我们使用普通的 Javascript 就可以创建一个很有趣的解决功能。

 

 

在线演示      源码下载

 

Step 1. HTML

和以前一样，首先是 HTML 代码：

<!DOCTYPE html><html>    <head>        <meta charset=utf-8 />        <title>Water drops effect</title>        <link rel="stylesheet" href="http://www.mamicode.com/css/main.css" type="text/css" />        <script src="http://www.mamicode.com/js/vector2d.js" type="text/javascript" charset="utf-8"></script>        <script src="http://www.mamicode.com/js/waterfall.js" type="text/javascript" charset="utf-8"></script>    </head>    <body>        <div class="example">            <h3><a href="http://www.mamicode.com/#">Water drops effect</a></h3>            <canvas id="water">HTML5 compliant browser required</canvas>            <div id="switcher">                <img onclick=‘watereff.changePicture(this.src);‘ src="http://www.mamicode.com/data_images/underwater1.jpg" />                <img onclick=‘watereff.changePicture(this.src);‘ src="http://www.mamicode.com/data_images/underwater2.jpg" />            </div>            <div id="fps"></div>        </div>    </body></html>　

Step 2. CSS

这是用到的 CSS 代码：

body{background:#eee;margin:0;padding:0}.example{background:#FFF;width:600px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}#water {    width:500px;    height:400px;    display: block;    margin:0px auto;    cursor:pointer;}#switcher {    text-align:center;    overflow:hidden;    margin:15px;}#switcher img {    width:160px;    height:120px;}

Step 3. JS

下面是主要的 JavaScript 代码：

function drop(x, y, damping, shading, refraction, ctx, screenWidth, screenHeight){    this.x = x;    this.y = y;    this.shading = shading;    this.refraction = refraction;    this.bufferSize = this.x * this.y;    this.damping = damping;    this.background = ctx.getImageData(0, 0, screenWidth, screenHeight).data;    this.imageData = http://www.mamicode.com/ctx.getImageData(0, 0, screenWidth, screenHeight);>

　　正如你所看到的，这里使用 Vector2D 函数，这个函数在 vector2d.js 里提供了。另一个很难的方法是使用纯数学实现，感兴趣的可以自己实验一下。

 

您可能感兴趣的相关文章
  • Web 前端开发人员和设计师必读精华文章推荐
  • 精心挑选的优秀jQuery Ajax分页插件和教程
  • 12个让人惊叹的的创意的 404 错误页面设计
  • 让网站动起来！12款优秀的 jQuery 动画插件
  • 8个前沿 HTML5 & CSS3 效果【附源码下载】

 

本文链接：如何使用 HTML5 Canvas 制作水波纹效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文来自【梦想天空（http://www.cnblogs.com/lhb25/）】

如何使用 HTML5 Canvas 制作水波纹效果


联系
我们