如何使用 HTML5 Canvas 制作水波纹效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用 HTML5 Canvas 制作水波纹效果相关的知识，希望对你有一定的参考价值。
参考技术A 今天，我们继续分享 javascript 实现的效果例子，这篇文章会介绍使用 JavaScript 实现水波纹效果。水波效果以图片为背景，点击图片任意位置都会触发。有时候，我们使用普通的 Javascript 就可以创建一个很有趣的解决功能。Step 1. html
和以前一样，首先是 HTML 代码：
<!DOCTYPE html><html> <head> <meta charset=utf-8 /> <title>Water drops effect</title> <link rel="stylesheet" href="css/main.css" type="text/css" /> <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 > <h3><a href="#">Water drops effect</a></h3> <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> </body></html>
Step 2. CSS
这是用到的 CSS 代码：
bodybackground:#eee;margin:0;padding:0.examplebackground:#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 = ctx.getImageData(0, 0, screenWidth, screenHeight); this.buffer1 = []; this.buffer2 = []; for (var i = 0; i < this.bufferSize; i++) this.buffer1.push(0); this.buffer2.push(0); this.update = function() for (var i = this.x + 1, x = 1; i < this.bufferSize - this.x; i++, x++) if ((x < this.x)) this.buffer2[i] = ((this.buffer1[i - 1] + this.buffer1[i + 1] + this.buffer1[i - this.x] + this.buffer1[i + this.x]) / 2) - this.buffer2[i]; this.buffer2[i] *= this.damping; else x = 0; var temp = this.buffer1; this.buffer1 = this.buffer2; this.buffer2 = temp; this.draw = function(ctx) var imageDataArray = this.imageData.data; for (var i = this.x + 1, index = (this.x + 1) * 4; i < this.bufferSize - (1 + this.x); i++, index += 4) var xOffset = ~~(this.buffer1[i - 1] - this.buffer1[i + 1]); var yOffset = ~~(this.buffer1[i - this.x] - this.buffer1[i + this.x]); var shade = xOffset * this.shading; var texture = index + (xOffset * this.refraction + yOffset * this.refraction * this.x) * 4; imageDataArray[index] = this.background[texture] + shade; imageDataArray[index + 1] = this.background[texture + 1] + shade; imageDataArray[index + 2] = 50 + this.background[texture + 2] + shade; ctx.putImageData(this.imageData, 0, 0); var fps = 0;var watereff = // variables timeStep : 20, refractions : 2, shading : 3, damping : 0.99, screenWidth : 500, screenHeight : 400, pond : null, textureImg : null, interval : null, backgroundURL : 'data_images/underwater1.jpg', // initialization init : function() var canvas = document.getElementById('water'); if (canvas.getContext) // fps countrt fps = 0; setInterval(function() document.getElementById('fps').innerHTML = fps / 2 + ' FPS'; fps = 0; , 2000); canvas.onmousedown = function(e) var mouse = watereff.getMousePosition(e).sub(new vector2d(canvas.offsetLeft, canvas.offsetTop)); watereff.pond.buffer1[mouse.y * watereff.pond.x + mouse.x ] += 200; canvas.onmouseup = function(e) canvas.onmousemove = null; canvas.width = this.screenWidth; canvas.height = this.screenHeight; this.textureImg = new Image(256, 256); this.textureImg.src = this.backgroundURL; canvas.getContext('2d').drawImage(this.textureImg, 0, 0); this.pond = new drop( this.screenWidth, this.screenHeight, this.damping, this.shading, this.refractions, canvas.getContext('2d'), this.screenWidth, this.screenHeight ); if (this.interval != null) clearInterval(this.interval); this.interval = setInterval(watereff.run, this.timeStep); , // change image func changePicture : function(url) this.backgroundURL = url; this.init(); , // get mouse position func getMousePosition : function(e) if (!e) var e = window.event; if (e.pageX || e.pageY) return new vector2d(e.pageX, e.pageY); else if (e.clientX || e.clientY) return new vector2d(e.clientX, e.clientY); , // loop drawing run : function() var ctx = document.getElementById('water').getContext('2d'); watereff.pond.update(); watereff.pond.draw(ctx); fps++; window.onload = function() watereff.init();
正如你所看到的，这里使用 Vector2D 函数，这个函数在 vector2d.js 里提供了。另一个很难的方法是使用纯数学实现，感兴趣的可以自己实验一下。本回答被提问者采纳
水波纹的动态效果
就像这样：http://bbs.nj999.com/attachment/52_12663.gif
谁有这种图的教程，或者文字教程也可以，请帮帮忙~~~~~~
以上是关于如何使用 HTML5 Canvas 制作水波纹效果的主要内容，如果未能解决你的问题，请参考以下文章