• We've upgraded our forums. Please post any issues/requests in this thread.

HTML5 animations

Joined
Mar 26, 2008
Messages
1,115 (0.31/day)
Likes
46
System Name mystie
Processor intel Q9450
Motherboard gigabyte EP45 UD3P
Cooling coolit domino ALC
Memory 4GB DDR3 1333
Video Card(s) sapphire 4870x2
Storage 250GB barracuda, 1.5TB barracuda
Display(s) 15" phillips, HannsG HD 28"
Case custom built plexiglass cube
Audio Device(s) Creative audigy SE
Power Supply Silverstone Strider 700W
Software Vista home premium 64/ Ubuntu 10.04 Beta 64
#1
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:
Joined
Aug 10, 2007
Messages
4,059 (1.07/day)
Likes
1,123
Location
Geneva, FL, USA
Processor Intel i5-6600
Motherboard ASRock H170M-ITX
Cooling Cooler Master Geminii S524
Memory G.Skill DDR4-2133 16GB (8GB x 2)
Video Card(s) Gigabyte R9-380X 4GB
Storage Samsung 950 EVO 250GB (mSATA)
Display(s) LG 29UM69G-B 2560x1080 IPS
Case Lian Li PC-Q25
Audio Device(s) Realtek ALC892
Power Supply Seasonic SS-460FL2
Mouse Logitech G700s
Keyboard Logitech G110
Software Windows 10 Pro
#2
Is init() being called?
 
Joined
Mar 26, 2008
Messages
1,115 (0.31/day)
Likes
46
System Name mystie
Processor intel Q9450
Motherboard gigabyte EP45 UD3P
Cooling coolit domino ALC
Memory 4GB DDR3 1333
Video Card(s) sapphire 4870x2
Storage 250GB barracuda, 1.5TB barracuda
Display(s) 15" phillips, HannsG HD 28"
Case custom built plexiglass cube
Audio Device(s) Creative audigy SE
Power Supply Silverstone Strider 700W
Software Vista home premium 64/ Ubuntu 10.04 Beta 64
#3
Last edited:
Joined
Aug 10, 2007
Messages
4,059 (1.07/day)
Likes
1,123
Location
Geneva, FL, USA
Processor Intel i5-6600
Motherboard ASRock H170M-ITX
Cooling Cooler Master Geminii S524
Memory G.Skill DDR4-2133 16GB (8GB x 2)
Video Card(s) Gigabyte R9-380X 4GB
Storage Samsung 950 EVO 250GB (mSATA)
Display(s) LG 29UM69G-B 2560x1080 IPS
Case Lian Li PC-Q25
Audio Device(s) Realtek ALC892
Power Supply Seasonic SS-460FL2
Mouse Logitech G700s
Keyboard Logitech G110
Software Windows 10 Pro
#4
$ is not defined. Some js frameworks use it as a shortened version of document.getElementByID().
 

temp02

New Member
Joined
Mar 18, 2009
Messages
493 (0.15/day)
Likes
165
#5
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>
 
Joined
Mar 26, 2008
Messages
1,115 (0.31/day)
Likes
46
System Name mystie
Processor intel Q9450
Motherboard gigabyte EP45 UD3P
Cooling coolit domino ALC
Memory 4GB DDR3 1333
Video Card(s) sapphire 4870x2
Storage 250GB barracuda, 1.5TB barracuda
Display(s) 15" phillips, HannsG HD 28"
Case custom built plexiglass cube
Audio Device(s) Creative audigy SE
Power Supply Silverstone Strider 700W
Software Vista home premium 64/ Ubuntu 10.04 Beta 64
#6
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>
: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