Water effect — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

This page's ID: 31529

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I didn't actually write that code. I did use it to make this script, which seems to run no problem. [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Canvas Stuff</title> </head> <body> <h1>Canvas Stuff</h1> <h3>Water like image reflection</h3> <canvas id="can" width="820" height="800" style="background:black"></canvas> <script src="excanvas.js"></script> <script> var img = new Image(); var step = 0; function animate(){ var canvas = document.getElementById("can"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,0)"; context.fillRect (0, img.height, img.width+60, img.height); var sinetable=new Array() for(var i = 0; i < img.height; i++){sinetable[i]=Math.sin(15(i/20.0))} for(var i = 0; i < img.height; i++){ context.drawImage( img, 0, 0+(img.height-i), img.width, 1, 40+Math.sin(12(step+i/20.0))(i/30.0), //(40+sinetable[step])+Math.sin(5(step+i/20))(i/50.0), img.height-1+i.3, img.width, .2); } step+= 1//0.0225; if (step==img.height){step-=img.height} setTimeout("animate();",200); } img.onload = function(){ var canvas = document.getElementById("can"); var context = canvas.getContext("2d"); context.drawImage(img,40, -1); setTimeout("animate();",100); } img.src = "http://tbn2.google.com/images?q=tbn:Nv5GSUrBhjC9RM:http://www.americanthinker.com/Obama%2520reuters%2520halo.jpg"; </script> </body> </html> [/code] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu