javascript - Animation canvas -
i have rectangle (which should appear) on canvas, want move side side of canvas. code have atm isn't working, nothing showing @ all! appreciated, cheers!
<!doctype html> <html> <head> <title>simple animations in html5</title> <!--<script> var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.fillstyle = "blue"; context.fillrect (20, 50, 200, 100); </script> --> <script> function drawmessage() var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.fillstyle = "blue"; context.fillrect(x, y, width, height); context.fillstyle = "white"; context.font = "30px arial"; context.filltext ("hello world", message_width, message_height); x += dx; y += dy; if(x <= 0 || x >= 500) { dx = -dx; } if(y <= 0 || y >= 200) { dy = -dy } function animate() { return setinterval(drawmessage, 10); } </script> </head> <body> <h2> optical illusion </h2> <video id="illusion" width="640" height="480" controls> <source src="illusion_movie.ogg"> </video> <div id="buttonbar"> <button onclick="changesize()">big/small</button> </div> <p> watch animation 1 minute, staring @ centre of image. @ else near you. few seconds appear distort. source: <a href="http://en.wikipedia.org/wiki/file:illusion_movie.ogg">wikipedia:illusion movie</a> </p> <script type="text/javascript"> var myvideo=document.getelementbyid("illusion"); var littlesize = false; function changesize() { myvideo.width = littlesize ? 800 : 400; littlesize = !littlesize;//toggle boolean } </script> <canvas id="mycanvas" width="500" height="500"> </canvas> <!--<script type="text/javascript"> var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.fillstyle = "blue"; context.fillrect(20, 50, 200, 100); context.fillstyle = "white"; context.font = "30px arial"; context.filltext ("hello world", 35, 110); </script> --> <script> var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); var x = 20; // x coordinate of box position var y = 50; // y coordinate of box position var dx = 2; // amount move box right var dy = 4; // amount move box down var width = 500; // width of canvas var height = 200; // height of canvas var message_width = 200; // width of message var message_height = 100; // height of message animate(); // run animation </script> </body> </html>
it seems me first script portion of code might missing curly braces. specifically, portion:
function drawmessage() var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.fillstyle = "blue"; context.fillrect(x, y, width, height); context.fillstyle = "white"; context.font = "30px arial"; context.filltext ("hello world", message_width, message_height); x += dx; y += dy; if(x <= 0 || x >= 500) { dx = -dx; } if(y <= 0 || y >= 200) { dy = -dy } might work better as:
function drawmessage() { var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.fillstyle = "blue"; context.fillrect(x, y, width, height); context.fillstyle = "white"; context.font = "30px arial"; context.filltext ("hello world", message_width, message_height); x += dx; y += dy; if(x <= 0 || x >= 500) { dx = -dx; } if(y <= 0 || y >= 200) { dy = -dy } }
Comments
Post a Comment