1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

HTML5 animations

Discussion in 'Programming & Webmastering' started by Braveheart, Aug 19, 2010.

  1. Braveheart

    Braveheart New Member

    Joined:
    Mar 26, 2008
    Messages:
    1,115 (0.47/day)
    Thanks Received:
    46
    HTML:
    <!DOCTYPE HTML>
    <html>
    <body>
    
    <canvas id="canvas" width="200" height="100;">
    Your browser does not support the canvas element.
    </canvas>
    
    <script type="text/javascript"> 
    
    //get reference to the canvas
    var c=document.getElementById("canvas");
    var cxt=c.getContext("2d");
    
    //draw circle
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(75,75,10,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
    
    //animate circle
    var x = 150;
    var y = 150;
    var dx = 2;
    var dy = 4;
    var ctx;
    
    function init() {
      ctx = $('#canvas')[0].getContext("2d");
      return setInterval(draw, 10);
    }
    
    function draw() {
      ctx.clearRect(0,0,300,300);
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI*2, true); 
      ctx.closePath();
      ctx.fill();
      x += dx;
      y += dy;
    }
    
    init();
    
    </script>
    
    </body>
    </html>
    
    anyone know what I'm doing wrong that would cause the red ball to not move?
     
    Last edited: Aug 19, 2010
  2. Jizzler

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    3,418 (1.32/day)
    Thanks Received:
    637
    Location:
    Geneva, FL, USA
    Is init() being called?
     
  3. Braveheart

    Braveheart New Member

    Joined:
    Mar 26, 2008
    Messages:
    1,115 (0.47/day)
    Thanks Received:
    46
    fixed, but still is not working!
     
    Last edited: Aug 19, 2010
  4. Jizzler

    Jizzler

    Joined:
    Aug 10, 2007
    Messages:
    3,418 (1.32/day)
    Thanks Received:
    637
    Location:
    Geneva, FL, USA
    $ is not defined. Some js frameworks use it as a shortened version of document.getElementByID().
     
  5. temp02 New Member

    Joined:
    Mar 18, 2009
    Messages:
    493 (0.25/day)
    Thanks Received:
    166
    Modified the code a bit to make it work, at least on Firefox, good luck.

    HTML:
    <html>
    <head>
    	<script type="text/javascript"> 
    		var interval = 25;
    		var x = 150;
    		var y = 10;
    		var vel = 0;
    		var timer;
    
    		function setup()
    		{
    			// get reference to the canvas
    			var c = document.getElementById("canvas1");
    			var cxt = c.getContext("2d");
    
    			// draw circle
    			cxt.fillStyle = "#FF0000";
    			cxt.beginPath();
    			cxt.arc(75, 75, 10, 0, Math.PI * 2, true);
    			cxt.closePath();
    			cxt.fill();
    
    			// animate circle
    			start();
    		}
    
    		function start()
    		{
    			timer = setInterval(draw, interval);
    		}
    
    		function draw()
    		{
    			var c = document.getElementById("canvas1");
    
    			if (c.getContext)
    			{
    				var ctx = c.getContext("2d");
    
    				ctx.clearRect(0, 0, 300, 300);
    				ctx.beginPath();
    				ctx.arc(x, y, 10, 0, Math.PI * 2, true); 
    				ctx.closePath();
    				ctx.fill();
    
    				// make it bounce :)
    				if (vel >= 0)
    					if (y < 250)
    					{
    					}
    					else
    					{
    						vel = -vel;
    						y = 250;
    					}
    				else
    					if (y < 250)
    					{
    					}
    					else
    					{
    					}
    				if (y != 250 || vel != 0)
    				{
    					vel = vel + 5;
    					y = y + vel;
    				}
    				else
    					clearTimeout(timer);
    			}
    		}
    	</script>
    </head>
    <body onload="setup();">
    	<canvas id="canvas1" width="300" height="300">
    Your browser does not support the canvas element.
    	</canvas>
    
    </body>
    </html>
     
    Braveheart says thanks.
  6. Braveheart

    Braveheart New Member

    Joined:
    Mar 26, 2008
    Messages:
    1,115 (0.47/day)
    Thanks Received:
    46
    :toast:well you just got me half way! thank you, I won't be copying your work but I will learn from the example and edit mine:D
     

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page