Using HTML5 Canvas to create water ripple effects, clicking an image will trigger,

Source: Internet
Author: User

Using HTML5 Canvas to create water ripple effects, clicking an image will trigger,
This article will introduce how to use JavaScript to achieve water ripple. The water wave effect is triggered when any image is clicked. The source code is provided for download. For more information, see

Today, we will continue to share examples of the effects of JavaScript implementation. This article will introduce the effects of water ripple using JavaScript. The watermark effect is triggered when any image is clicked. Sometimes, we can use Javascript to create an interesting solution.
 

Source code download

Step 1. HTML

As before, the first step is the HTML code:

The Code is as follows:
<! 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> <Canvas id = "water"> HTML5 compliant browser required </canvas>
<Div id = "switcher">


</Div>
<Div id = "fps"> </div>
</Div>
</Body>
</Html>

Step 2. CSS

Here is the CSS code used:

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:

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 ();
}

As you can see, the Vector2D function is used here, which is provided in vector2d. js. Another difficult method is to use pure mathematics. If you are interested, try it yourself.




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.