Bewegungen mit HTML5

Prinzip einer Bewegung

Ein Zeichenobjekt wird wiederholt an verschiedenen Orten in einer Zeichenfläche gezeichnet, wobei damit der Eindruck einer Bewegung entsteht vor dem Zeichnen an einem neuen Ort das Objekt am alten Ort gelöscht werden muss, indem der ganze Zeichenbereich gelöscht wird (clearRect()).

Bewegung als Klasse

Um einen Kreis als Ball zu bewegen, müssen die Methoden zum Zeichnen des Balles und zur Festlegung des Ortes um eine Methode für die Bewegung ergänzt werden.
Will man die Bewegung als Methode der Klasse Ball programmieren, muss diese static sein, da die JavaScript-Methode requestAnimationFrame(), die für die Wiederholung der Methode BallmitBewegung() verantwortlich ist, nur mit konkreten Objekten und nicht mit this arbeiten kann. Ansonsten könnte die Bewegung auch außerhalb der Klasse Ball als JavaScript-Funktion programmiert werden.
Bewegt wird der Ball letztendlich, indem innerhalb von JavaScript mit dem Schlüsselwort new aus der Klasse Ball ein Objekt Ball1 gebildet wird, auf das die Methode BallmitBewegung() angewendet wird.

<!DOCTYPE html><html><head><title>BallmitBewegung</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
class Ball{
  constructor(x,y,vx,vy) {    this.x=x;    this.y=y;    this.vx=vx;    this.vy=vy;   }
  zeichnenBall(ballRadius){    ctx.beginPath();    ctx.arc(this.x, this.y,ballRadius,0, Math.PI*2,false);    ctx.closePath();    ctx.strokeStyle = 'black';    ctx.stroke();    ctx.fillStyle = "#0095DD";    ctx.fill();  }
  bewegenBall(){    var dt=1;    var dx=this.vx*dt;    var dy=this.vy*dt;    this.x =this.x+dx;    this.y =this.y+dy;  }
  static BallmitBewegung(){    ctx.clearRect(0, 0, canvas.width, canvas.height);    Ball1.zeichnenBall(10);    Ball1.bewegenBall();    window.requestAnimationFrame(Ball.BallmitBewegung);  }
}
var Ball1=new Ball(100,1,1,1);Ball.BallmitBewegung();
</script></body></html>

Aufrufen der Bewegung des Balls durch EventHandler

Damit die in Funktionen zusammengefassten Anweisungen ausgeführt werden, müssen die Funktionen entweder im body mit ihrem Namen oder als Parameter des HTML-Elements body aufgerufen werden.
Man kann in JavaScript aber auch mit einer Methode einen EventListener starten.
Die JavaScript-Methode requestAnimationFrame hat das Problem, dass wenn sie nicht gestoppt wird, sie bei den nächsten Aufrufen immer schneller abläuft.

<!DOCTYPE html><html><head><title>BallmitBewegung</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background: #eee;"></canvas><script>'use strict';var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var ref;class Ball{
  constructor(x,y,vx,vy) {    this.x=x;    this.y=y;    this.vx=vx;    this.vy=vy;   }
  zeichnenBall(ballRadius){    ctx.beginPath();    ctx.arc(this.x, this.y,ballRadius,0, Math.PI*2,false);    ctx.closePath();    ctx.strokeStyle = 'black';    ctx.stroke();    ctx.fillStyle = "#0095DD";    ctx.fill();  }
  bewegenBall(){    var dt=1;    var dx=this.vx*dt;    var dy=this.vy*dt;    this.x =this.x+dx;    this.y =this.y+dy;  }
static BallmitBewegung(){    ctx.clearRect(0, 0, canvas.width, canvas.height);    Ball1.zeichnenBall(10);    Ball1.bewegenBall();    ref=window.requestAnimationFrame(Ball.BallmitBewegung);  }
}
var Ball1=new Ball(1,1,1,1);

//Eventhandler
document.getElementById("myCanvas").addEventListener("mouseover",start);document.getElementById("myCanvas").addEventListener("mouseout",stop);
function start(){Ball1.x = canvas.width/2;Ball1.y = canvas.height/2;Ball.BallmitBewegung();}function stop(){window.cancelAnimationFrame(ref);}
</script></body></html>