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

HTML5 animations

Braveheart

Braveheart

New Member
Joined
Mar 26, 2008
Messages
1,115 (0.19/day)
System Specs
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
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:
Disparia

Disparia

Joined
Aug 10, 2007
Messages
4,267 (0.70/day)
Location
Sanford, FL, USA
System Specs
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
Is init() being called?
 
Braveheart

Braveheart

New Member
Joined
Mar 26, 2008
Messages
1,115 (0.19/day)
System Specs
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
Last edited:
Disparia

Disparia

Joined
Aug 10, 2007
Messages
4,267 (0.70/day)
Location
Sanford, FL, USA
System Specs
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
$ is not defined. Some js frameworks use it as a shortened version of document.getElementByID().
 
T

temp02

New Member
Joined
Mar 18, 2009
Messages
493 (0.09/day)
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

Braveheart

New Member
Joined
Mar 26, 2008
Messages
1,115 (0.19/day)
System Specs
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
temp02 said:
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>
Click to expand...

: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
 
You must log in or register to reply here.
Top