首先在代码的如下位置打印事件对象，检查是不是重复调用了：
结果点击上面的“waves”和“btn”按钮分别返回了不同的事件对象，所以排除重复调用的可能。
在代码的129行，将动画定时器的时间改大（减慢动画执行速度），观察效果：
经观察，发现这个“水波纹”特效是全屏的，你看到的点击一个按钮后两个按钮上都有水波纹，其实是因为生成的那个水波纹动画层全屏覆盖住了整个页面，由于水波纹层是白色半透明的，所以页面的白色区域下你看不见，有其他颜色的区域都会看见（你可以把body的背景颜色改为除白色外的其他颜色，再点按钮试试）。
根因已经找到，解决的办法很简单，让生成的水波纹层不超出当前按钮区域即可，具体为：在代码第20行，为.waves, .btn 增加两行CSS代码：
position: relativeoverflow: hidden
搜了几篇老外的文章，提到 svg 的 forginObject 内的 HTML 元素，当应用 CSS3 动画时，动画的 transform-origin 是基于最外层 body 定位的，貌似无解。
个人建议使用 svg 的 SMIL 动画来实现波纹特效，你大屏展示用的话，兼容性啥的应该不是主要问题。写了简单示例代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>svg 动画示例</title>
<style>
html,
body,
svg {
width: 100%
height: 100%
}
body {
padding: 0
margin: 0
background: #232323
}
.eanimation {
stroke: rgb(181, 255, 255)
box-shadow: inset 0px 0px 8px rgba(29, 146, 226, 0.75)
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<circle class="eanimation" cx="200" cy="200" r="96" stroke-width="3" fill="transparent"/>
<animateTransform
attributeName="transform"
type="scale"
dur="1s"
values="0.51"
repeatCount="indefinite"/>
</g>
<g>
<circle class="eanimation" cx="200" cy="200" r="96" stroke-width="3" fill="transparent"/>
<animateTransform
attributeName="transform"
type="scale"
dur="1s"
values="0.651"
additive="sum"
repeatCount="indefinite"/>
</g>
<animate attributeName="opacity" begin="0s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
</g>
</svg>
</body>
</html>
1、首先：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 class="example">
<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>
2、然后是css样式
body{background:#eeemargin:0padding:0}
.example{background:#FFFwidth:600pxborder:1px #000 solidmargin:20px autopadding: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
}
3、再然后是js代码
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 = 0i <this.bufferSizei++){
this.buffer1.push(0)
this.buffer2.push(0)
}
this.update = function(){
for (var i = this.x + 1, x = 1i <this.bufferSize - this.xi++, 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) * 4i <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()
}
4、然后就没然后了
