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();
}