Jak wyświetlić element statyczny na płótnie z animacją?

0

Witam,

mam problem z wyświetleniem zwykłych 2 czerwonych kropek na canvie, na której jest animacja. Wygląda to mniej więcej w ten sposób, że sama animacja jest wyświetlona. Zdaje sobie sprawę, że czegoś brakuje w tej funkcji, tylko nie mam pojęcia czego. Przeszukiwałam wczoraj, i dzisiaj internety, ale na nic. Dopiero zaczynam zabawę w tym i uczę się, także liczę na Waszą pomoc :)

button2.onclick = function()
{
	//Wodor
		c.fillStyle = 'red';
		c.beginPath();
		c.arc(600, 200, 30, 0, Math.PI*2, false);
		c.strokeStyle = 'red';
		c.stroke();
		c.fill();
		c.fillStyle = 'red';
		c.beginPath();
		c.arc(800, 200, 30, 0, Math.PI*2, false);
		c.strokeStyle = 'red';
		c.stroke();
		c.fill();
	//Wiazanie H1 z H2
		c.beginPath();
		c.moveTo(600, 200);
		c.lineTo(800, 200);

		
function Atom(x, y, dx, dy, radius)
{
	c.beginPath();
	this.x = x;
	this.y = y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	
	this.draw = function()
	{
		c.beginPath();
		c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
		c.fillStyle = 'white';
		c.strokeStyle = 'white';
		c.stroke();
		c.fill();
		
	}
	
	this.update = function ()
	{
		if (this.x + this.radius > innerWidth || this.x - this.radius < 0)
		{
			this.dx = -this.dx;
		}
		if (this.y + this.radius > innerHeight || this.y - this.radius < 0)
		{
			this.dy = -this.dy;
		}
			
		this.x += this.dx;
		this.y += this.dy;
		this.draw();
	}
	
}
var atomArray = [];
	for(var i=0; i < 3; i++)
{
	var x = Math.random() * (innerWidth - radius *2) + radius;
	var y = Math.random() * (innerHeight - radius *2) + radius;
	var dx = (Math.random() - 1) *5;
	var dy = (Math.random() - 1) *5;
	var radius = 30;
	atomArray.push(new Atom(x, y, dx, dy, radius));
}

function animate()
{
		requestAnimationFrame(animate);
		c.clearRect(0,0, innerWidth, innerHeight);
	
	for(var i=0; i < atomArray.length; i++)
	{
		atomArray[i].update();
	}
	
}

animate();
}
0

Wrzuć to na jsfiddle.net, codepen.io czy inny podobny wynalazek (razem z kodem HTML), wtedy będzie można to odpalić, bo tak to nie widać za bardzo, co jest źle.

0

Coś takiego: https://jsfiddle.net/rjj0sur3/2 .Po wybraniu buttona Atomy pojawia się tylko animacja, a zależy mi na pojawieniu się elementów statycznych jak i animacji.

0

Nvm już ogarnięte, można zamknąć.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.