How to use HTML5 Canvas to create water ripple effects

Source: Internet
Author: User

How to use HTML5 Canvas to make water ripple effect

Today, we continue to share examples of the effects of JavaScript implementations, and this article describes the use of JavaScript for water ripple effects. The water wave effect takes the picture as the background, the click image anywhere will trigger. Sometimes, we can create a very interesting solution using normal Javascript .

Online Demo Source Download

Step 1. Html

As before, the first is the HTML code:

<! DOCTYPE html>Step 2. Css

Here is the CSS code used:

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

Here's the main JavaScript code:

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-t                His.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] = + 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:funct        Ion () {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.offsetl                EFT, 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.S            Creenwidth, 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, and this function is provided in the vector2d.js. Another difficult way is to use pure mathematics to achieve, interested can experiment with their own.

Related articles that may be of interest to you
    • Web front-end developers and designers must read the essence of the article recommended
    • Carefully selected excellent jquery Ajax page plug-ins and tutorials
    • 12 Amazing ideas for 404 error page Design
    • Let the website Move! 12 Excellent jQuery animation plugins
    • 8 Cutting-Edge HTML5 & CSS3 effects "with source download"

This article links: How to use HTML5 Canvas to create water ripple effect

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

How to use HTML5 Canvas to create water ripple effects

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.