Wie zeichnet man animierte Kreise in HTML5 Leinwand

In diesem Beitrag werden die erforderlichen Schritte zum Zeichnen von Kreisen und Anwenden einfacher Animationen mit Kollisionserkennung erläutert.

Schritt 1: Kreis zeichnen

In diesem Schritt lernen wir, wie man einen Kreis in die Leinwand zeichnet mit Bogen()-Methode, wie unten erläutert.

Wir haben benutzt der beginPath() Methode, um unseren Pfad zu beginnen und rief die Bogen() Methode, um die Kreisoperation hinzuzufügen. Am Ende haben wir die Schlaganfall()-Methode, um alle kumulierten Operationen zu zeichnen. In unserem Fall haben wir dem Pfad nur einen einzigen Kreis hinzugefügt.

Methodensignatur - Bogen(x, y, Radius, Startwinkel, Endwinkel, gegen den Uhrzeigersinn)

Methodenparameter -

x - Die x-Koordinate des Kreismittelpunkts

y - Die y-Koordinate des Kreismittelpunkts

Radius - Der Radius des Kreises

startAngle - Startposition des Bogens

endAngle - Startposition des Bogens

gegen den Uhrzeigersinn - Flagge zum Ändern der Kreisrichtung

// Single Circle - Get Canvas element by Id
var canvas1 = document.getElementById( "canvas1" );

// Set Canvas dimensions
canvas1.width   = 200;
canvas1.height  = 200;

// Get drawing context
var c1 = canvas1.getContext( '2d' );

// Begin Path
c1.beginPath();

// Arc Operation
c1.arc( 50, 50, 30, 0, Math.PI * 2, false );

// Fill Stroke
c1.stroke();

Der obige Code draws ein Kreis, indem man die x-Achse von links nach rechts und die y-Achse von oben nach unten betrachtet.

Schritt 2: Mehrere Kreise zeichnen

In diesem Schritt zeichnen wir mehrere Kreise mithilfe einer einfachen Iteration mit einer for-Schleife. Wir haben auch die Mathe.Zufalls() Methode, um einen anderen Wert der x- und y-Koordinaten zu erhalten um die Position der Kreise zufällig anzuordnen.

// Multiple Circle - Get Canvas element by Id
var canvas2 = document.getElementById("canvas2");

// Set Canvas dimensions
canvas2.width   = 200;
canvas2.height  = 200;

// Get drawing context
var c2 = canvas2.getContext('2d');

// Iterate to draw 4 circles
for( var i = 0; i < 4; i++ ) {
	// Generate x and y values between 0 to 140 considering 30 pt radius
  	var x = 30 + Math.random() * 140;
  	var y = 30 + Math.random() * 140;

	// Begin Path
	c2.beginPath();

  	// Arc Operation
  	c2.arc( x, y, 30, 0, Math.PI * 2, false );

  	// Fill Stroke
  	c2.stroke();
}

Schritt 3: Einen Kreis animieren

Um den Kreis zu animieren, haben wir AnfrageAnimationFrame(Funktionsname)-Methode. Wir haben dx und dy verwendet, um die Änderung der Kreisbewegung in x- bzw. y-Richtung zu steuern.

Um den Kreis zu bewegen, erhöhen wir die Änderung der x- und y-Werte um 1. Wir haben dx und dy verwendet, um die Animationsgeschwindigkeit des Kreises zu steuern. Wenn die x- und y-Werte über den Bereich von 50 bis 150 hinauswachsen, machen wir die Änderung rückgängig, indem wir die dx- und dy-Werte negativ machen und umgekehrt. Die Funktion löschen() wird verwendet, um die in vorherigen Iterationen auf Canvas erstellten Zeichnungen zu löschen.

// Single Animated Circle - Get Canvas element by Id
var canvas3 = document.getElementById("canvas3");

// Set Canvas dimensions
canvas3.width   = 200;
canvas3.height  = 200;

// Get drawing context
var c3 = canvas3.getContext( '2d' );

// Radius
var radius = 50;

// Starting Position
var x 	= radius + Math.random() * ( 200 - radius * 2 );
var y 	= radius + Math.random() * ( 200 - radius * 2 );

// Speed in x and y direction
var dx 	= (Math.random() - 0.5) * 2;
var dy 	= (Math.random() - 0.5) * 2;
function animate3() {

  	requestAnimationFrame( animate3 );
  	c3.clearRect( 0, 0 , 200, 200 );
  	if( x + radius > 200 || x - radius < 0  ) {
    		dx = -dx;
  	}
  	if(  y + radius > 200 || y - radius < 0 ) {
    		dy = -dy;
  	}
  	x += dx;
  	y += dy;
  	c3.beginPath();
  	c3.arc( x, y,  50, 0, Math.PI * 2, false  );
  	c3.stroke();
}

// Animate the Circle
animate3();

Der oben erwähnte Code fügt einen animierten Kreis innerhalb der Leinwandgrenzen hinzu.

Schritt 4: Mehrere Kreise animieren

Um mehrere Kreise zu zeichnen und zu animieren, haben wir die Kreisklasse mit Zeichen- und Aktualisierungsfunktion verwendet, um die Position jedes Kreises beizubehalten. Die Zeichenfunktion wird zum Zeichnen des Kreises verwendet und die Aktualisierungsfunktion wird zum Steuern der Kreisbewegung verwendet.

Ähnlich wie in Schritt 3 werden wir iterieren und mehrere Kreise mit Objekten der Klasse circle erstellen. Wir haben die Funktion animieren4() mit einer For-Schleife als unserer Render- oder Animations-Schleife, um alle Kreisobjekte zu iterieren und die Update-Methode aufzurufen, um die Kreisposition zu ändern.

// Multiple Animated Circle - Get Canvas element by Id
var canvas4 = document.getElementById( "canvas4" );

// Set Canvas dimensions
canvas4.width   = 200;
canvas4.height  = 200;

// Get drawing context
var c4 = canvas4.getContext( '2d' );

// The Circle class
function Circle( x, y, dx, dy, radius ) {
	this.x 	= x;
	this.y 	= y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	this.draw = function() {
		c4.beginPath();
		c4.arc( this.x, this.y,  this.radius, 0, Math.PI * 2, false  );
		c4.strokeStyle = "blue";
		c4.stroke();
	}

	this.update = function() {
		if( this.x + this.radius > 200 || this.x - this.radius < 0 ) {
			this.dx = -this.dx;
		}
		if( this.y + this.radius > 200 || this.y - this.radius < 0 ) {
			this.dy = -this.dy;
		}

		this.x += this.dx;
		this.y += this.dy;
		this.draw();
	}
}

var circles = [];

// Radius
var radius = 50;

for( var i = 0; i < 5; i++ )  {
	// Starting Position
	var x = Math.random() * ( 200 - radius * 2 ) + radius;
	var y = Math.random() * ( 200 - radius * 2) + radius;

	// Speed in x and y direction
  	var dx = ( Math.random() - 0.5 ) * 2;
  	var dy = ( Math.random() - 0.5 ) * 2;

	circles.push( new Circle( x, y, dx, dy, radius ) );
}

function animate4() {
	requestAnimationFrame( animate4 );
	c4.clearRect( 0, 0, 200, 200 );
	for( var r = 0; r < 5; r++ ) {
		circles[ r ].update();
	}
}

animate4(); 

Die animierten Kreise mit Standardstrich sehen ähnlich aus wie die Ausgabe

Schritt 5: Animierten Kreisen Farben hinzufügen

In diesem Schritt fügen wir der Klasse „Kreis“ die Farbeigenschaft hinzu und verwenden für jeden Kreis eine andere Farbe, um kleinere Abweichungen zu erzielen.

// Multiple Colored Animated Circle - Get Canvas element by Id
var canvas5 = document.getElementById( "canvas5" );

// Set Canvas dimensions
canvas5.width   = 200;
canvas5.height  = 200;

// Get drawing context
var c5 = canvas5.getContext( '2d' );

// The Circle class
function ColoredCircle( x, y, dx, dy, radius, color ) {
	this.x 	= x;
	this.y 	= y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	this.color 	= color;
	this.draw = function() {
		c5.beginPath();
		c5.arc( this.x, this.y, this.radius, 0, Math.PI * 2, false );
		c5.strokeStyle = this.color;
		c5.stroke();
	}
	this.update = function() {
		if( this.x + this.radius > 200 || this.x - this.radius < 0 ) {
			this.dx = -this.dx;
		}
		if( this.y + this.radius > 200 || this.y - this.radius < 0 ) {
			this.dy = -this.dy;
		}
		this.x += this.dx;
		this.y += this.dy;
		this.draw();
	}
}

var coloredCircles = [];
var circleColors = [ 'red', 'green', 'blue', 'yellow', 'orange' ];

// Radius
var radius = 50;

for( var i = 0; i < 5; i++ )  {
	// Starting Position
	var x = Math.random() * ( 200 - radius * 2 ) + radius;
	var y = Math.random() * ( 200 - radius * 2) + radius;

	// Speed in x and y direction
  	var dx = ( Math.random() - 0.5 ) * 2;
  	var dy = ( Math.random() - 0.5 ) * 2;

	// Color
	var color = circleColors[ i ];

	coloredCircles.push( new ColoredCircle( x, y, dx, dy, radius, color ) );
}

function animate5() {
	requestAnimationFrame( animate5 );
	c5.clearRect( 0, 0, 200, 200 );
	for( var r = 0; r < 5; r++ ) {
		coloredCircles[ r ].update();
	}
}

animate5();