本文将介绍使用javaｓｃｒｉｐｔ来实现水波效果的效果。水波效果以图片为背景，点击图片，在任何位置都会触发，附带源码下载，喜欢的朋友可以参考下。





今天，我们继续分享Javaｓｃｒｉｐｔ实现的效果，它引入了Javaｓｃｒｉｐｔ来实现涟漪效应，水波的效果在图片中作为背景，在任何位置都会触发图片的点击，有时我们可以用普通Javaｓｃｒｉｐｔ创建一个有趣的解决方案。


源码下载

步骤1。HTML

和前面一样，第一个是HTML代码：

复制代码代码如下所示：




水滴效果






水滴效果
符合HTML5要求的浏览器







U3000

步骤2。CSS

这是使用的CSS代码：

复制代码代码如下所示：
体{背景：# EEE；保证金：0；padding: 0 }
例如，{背景：# FFF；宽度：600px；边界：1px # 000固体；保证金：20px汽车；padding: 15px；-moz边界半径：3px；- WebKit的边界半径：3px }
{ #水
宽度：500px；
身高：400px；
显示块；
保证金：为0px auto；
光标：指针；
}
{ #切换器
文本对齐：中心；
溢出：隐藏；
保证金：15px；
}
#切换器{ IMG
宽度：160px；
身高：120px；
}

步骤3。js

下面是主要的Javaｓｃｒｉｐｔ代码：

复制代码代码如下所示：
功能下降（x，y，阻尼、阴影、折射、CTX、屏幕宽度，screenheight）{
这个；
这个，y = y；
this.shading =阴影；
this.refraction =折射；
this.buffersize =，X，Y；
this.damping =阻尼；
this.background = ctx.getimagedata（0, 0，屏幕宽度，screenheight数据）；
this.imagedata = ctx.getimagedata（0, 0，屏幕宽度，screenheight）；
this.buffer1 = { }；
this.buffer2 = { }；
对于（var i = 0；i < this.buffersize；i++）{
（0）this.buffer1.push；
（0）this.buffer2.push；
}
this.update =函数（）{
对于（var i =这。x + 1，x = 1；i < this.buffersize这。X；i++，X + +）{
如果（（x <此x））{
这。2 {我} =（（这个工作{ 1 } +我这个工作{我+ 1 } +本。工作{我这。x } +本。工作{我+，x }） / 2）这2 {我}；
这2 {我} = this.damping；
否则x＝0 }；
}
VaR的温度= this.buffer1；
this.buffer1 = this.buffer2；
this.buffer2 =温度；
}
this.draw =功能（CTX）{
无功imagedataarray = this.imagedata.data；
对于（var i =这。x + 1，指数=（这个x + 1）* 4；i < this.buffersize（1，x）；i++，指数= 4）{
VaR xoffset = ~ ~（这个工作{ 1 }我这。工作{我+ 1 }）；
无功yoffset = ~ ~（这个工作{我这。x }这。工作{我+，x }）；
VaR的阴影= this.shading xoffset *；
VAR纹理=指数+（xoffset * this.refraction + yoffset * *这this.refraction。x）×4；
imagedataarray { } = {这个指标。背景纹理} +阴影；
imagedataarray {指数+ 1 } = {这个背景纹理+ 1 } +阴影；
imagedataarray { 2 } = 50 +指标+本。背景{纹理+ 2 } +阴影；
}
ctx.putimagedata（this.imagedata，0, 0）；
}
}
fps = 0；
无功watereff = { {
变量
时间：20，
折射：2，
阴影：3，
阻尼：0.99，
屏幕宽度：500，
screenheight：400，
池塘：空，
textureimg：空，
间隔：null，
backgroundurl：'data_images / underwater1 .jpg，
初始化
init：函数（）{
VaR的画布document.getelementbyid（水）；
如果（帆布。getContext）{
FPS / /乡下咯
fps＝0；
setInterval（）{（）函数（
document.getelementbyid（'fps）.innerHTML = FPS / 2 +的FPS；
fps＝0；
}，2000）；
canvas.onmousedown =功能（e）{
VaR鼠标= watereff.getmouseposition（E），Sub（新vector2d（canvas.offsetleft，帆布。offsettop））；
Watereff。池塘。工作{老鼠。Y * watereff。池塘。X +鼠标。x + = 200 }；
}
canvas.onmouseup =功能（e）{
canvas.onmousemove = null；
}
canvas.width = this.screenwidth；
canvas.height = this.screenheight；
this.textureimg =新形象（256, 256）；
this.textureimg.src = this.backgroundurl；
canvas.getcontext（二维的）DrawImage（this.textureimg，0, 0）；
this.pond =新滴（
This.screenWidth，
This.screenHeight，
this.damping，
this.shading，
this.refractions，
canvas.getcontext（二维的），
this.screenwidth，this.screenheight
）；
如果（this.interval！= NULL）{
ClearInterval（这个区间）；
}
this.interval = setInterval（watereff.run，这个时间）；
}
}，
映像函数/更改
changepicture：功能（URL）{
this.backgroundurl =网址；
This.init（）；
}，
鼠标位置函数
getmouseposition：功能（e）{
如果（！e）{
var = window.event；
}
如果（e.pagex | | e.pagey）{
返回新的vector2d（e.pagex，e.pagey）；
如果（e.clientx | | e.clienty { }）
返回新的vector2d（e.clientx，e.clienty）；
}
}，
循环
运行：函数（）{
VaR CTX = document.getelementbyid（水）。GetContext（二维的）；
watereff.pond.update（）；
watereff.pond.draw（CTX）；
fps + +；
}
}
在window.onload =函数（）{
Watereff.init（）；
}

你可以看到，这vector2d功能是用在这里，这是在vector2d.js.another困难的方式提供给做的是用纯数学，你可以尝试自己的兴趣。