How to Use HTML5 Canvas to make water ripple effects, html5canvas
Today, we will continue to shareJavaScriptThis article describes how to implement water ripple using JavaScript. The watermark effect is triggered when any image is clicked. Sometimes, we use commonJavascriptYou can create an interesting solution.
Download demo source code online
Step 1. HTML
As before, first of allHTMLCode:
<!DOCTYPE html>Step 2. CSSThis is used.CSSCode:
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. JSThe following is 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 - 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.
Articles you may be interested in
Link to this article: How to Use HTML5 Canvas to make water ripple effects
Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources
This article from [dream sky (http://www.cnblogs.com/lhb25 )]
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> sawtooth chart </title>
<Script type = "text/javascript">
Window. addEventListener ("load", eventWindowLoaded, false );
Function eventWindowLoaded (){
Var x, y;
Var theCanvas = document. getElementById ("canvas ");
Var context = theCanvas. getContext ("2d ");
// Context. fillStyle = "#000000 ";
// Context. fillStyle = '# EEEEEE ';
// Context. fillRect (0, 0, theCanvas. width, theCanvas. height );
// Box
Context. strokeStyle = '#000000 ';
Context. lineWidth = 10;
Context. strokeRect (0, 0, theCanvas. width-0, theCanvas. height-0 );
Context. fillStyle = "#000000 ";
For (x = 5; x <= canvas. width; x = x + 10 ){
Context. beginPath ();
Context. arc (x, 5, 5, 0, Math. PI * 2, true );
Context. arc (x, canvas. height-5, 5, 0, Math. PI * 2, true );
Context. closePath ();
Context. fill ();
}
For (y = 5; y <= canvas. height; y = y + 10 ){
Context. beginPath ();
Context. arc (5, y, 5, 0, Math. PI * 2, true );
Context. arc (canvas. width-5, y, 5, 0, Math. PI * 2, true );
Context. closePath ();
Context. fill ();
}
}
</Script>
</Head>
<Body>
<Div style = "position: absolute; top: 0px; left: 0px;">
<Canvas id = "canvas" width = "200" height = "200" top = 50px; left = 50px;>
</Div>
</Body>
</Html>
The code is
I qq812316704... the remaining full text>
How to Use html5 canvas to create a small graph example
<! Doctype html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
