html5 - Canvas+Javascript water overlay -
i'm trying make water waves in javascript on canvas there wrong.
my idea making 3 waves different colors overdraw each other. not able figure out problem is.
<!doctype html> <html> <style> <!-- 100% area --> body, html { height: 100%; width: 100%; } </style> <body> <canvas id="mycanvas" ></canvas> <script> //get window size var canvas = document.getelementbyid( "mycanvas" ); canvas.width = window.innerwidth; /// equal window dimension canvas.height = window.innerheight; // context var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext('2d'); // variables var framecount=0; var n = 30; var positionxteiler= math.floor(canvas.width/(n-n/2)); var size = 50; var xoffset = 200; var colors = []; var amplitude = 200; var wavescount = 3; var init = function() { colors.push("rgba(0,0,128,1)"); colors.push("rgba(0,0,255,1)"); colors.push("rgba(47,86,233,1)"); } var draw = function() { context.clearrect (0, 0, canvas.width, canvas.height); (i=0; i<n; i++) { (n=0; n<wavescount; n++) { var x = amplitude*math.sin (framecount*0.02+n*math.pi/2); context.save(); context.fillstyle = colors[n]; context.beginpath(); context.arc(positionxteiler*i+x-xoffset,canvas.height-n*20,size,0,math.pi*2,true); context.closepath(); context.fill(); context.restore(); } } // count frame , loop animation framecount = framecount+1; requestanimationframe(draw); }; // start loop init(); draw(); </script> </body> </html>my result should + moving
loop waves and, inside, loop circles (i.e. invert 2 loops).
the goal draw circles of wave before moving next. way making sure circles of wave drawn on top of circles of previous one.
also, may want consider using time-based increment instead of frame count. animation frames not guaranteed regular , rate depends of user's system.
//get window size var canvas = document.getelementbyid( "mycanvas" ); canvas.width = window.innerwidth; /// equal window dimension canvas.height = window.innerheight; // context var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext('2d'); // variables var framecount=0; var n = 30; var positionxteiler= math.floor(canvas.width/(n-n/2)); var size = 50; var xoffset = 200; var colors = []; var amplitude = 200; var wavescount = 3; var init = function() { colors.push("rgba(0,0,128,1)"); colors.push("rgba(0,0,255,1)"); colors.push("rgba(47,86,233,1)"); } var draw = function() { context.clearrect (0, 0, canvas.width, canvas.height); (n=wavescount-1; n>=0; n--) { (i=0; i<n; i++) { var x = amplitude*math.sin (framecount*0.02+n*math.pi/2); context.save(); context.fillstyle = colors[n]; context.beginpath(); context.arc(positionxteiler*i+x-xoffset,canvas.height-n*20,size,0,math.pi*2,true); context.closepath(); context.fill(); context.restore(); } } // count frame , loop animation framecount = framecount+1; requestanimationframe(draw); }; // start loop init(); draw();<!-- 100% area --> body, html { height: 100%; width: 100%; }<!doctype html> <html> <body> <canvas id="mycanvas" ></canvas> </body> </html>
Comments
Post a Comment