Home > Web Front-end > H5 Tutorial > body text

Use HTML5 Canvas to create a water ripple effect that will be triggered when you click on the picture_html5 tutorial skills

WBOY
Release: 2016-05-16 15:47:29
Original
2227 people have browsed it

Today, we continue to share examples of effects implemented in JavaScript. This article will introduce the use of JavaScript to achieve the water ripple effect. The water wave effect uses the picture as the background and will be triggered by clicking anywhere on the picture. Sometimes, we can create an interesting solution using plain Javascript.

Source code download

Step 1. HTML

As before, the first is the HTML code:

Copy code
The code is as follows:



< ;head>

Water drops effect






Water drops effect


HTML5 compliant browser required









Step 2 . CSS

This is the CSS code used:

Copy code
The code is as follows :

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

The following is the main JavaScript code:

Copy the code
The code is as follows:

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 里提供了。另一个很难的方法是使用纯数学实现,感兴趣的可以自己实验一下。
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template