Videos eBook Forum Kontakt

jetzt Videos kaufen
damit HTML lernen ...
...
nicht für die Katz ist

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Kreise zeichnen mit Canvas

Um einen Kreis zu zeichnen, benötigen wir folgende Angaben:

  • X-Wert für den Mittelpunkt
  • Y-Wert für den Mittelpunkt
  • R für den Radius
  • Der Startwinkel (wenn man einen Kreisausschnitt zeichnen möchte)
  • Den Endwinkel (wenn man einen Kreisausschnitt zeichnen möchte)
  • Die Zeichenrichtung

Wir haben also Anweisung den Aufbau arc( x, y, r, Startwinkel, Endwinkel); und als weiteren Anweisungswert die Zeichenrichtung drawCounterClockwise. Für die Zeichenrichtung wird später nur „true“ oder „false“ eingegeben, also on in Uhrzeigerrichtung oder gegen die Uhrzeigerrichtung gezeichnet wird.

Als komplette Code sieht das wie folgt aus:

// Kreis bzw. Kreisausschnitt
c.arc( 250, 250, 50, 0, Math.PI * 2, false);

Bisher wird noch nichts gezeichnet. Das Zeichnen lösen wir nun über stroke(); aus.

c.arc( 250, 250, 50, 0, Math.PI * 2, false);
c.stroke();

Wir erhalten nun einen Umriss von unserem Kreis.

Allerdings hängt unser Kreis noch an der bisherigen Linie – sprich diese wird fortgeführt, was für manche Fälle natürlich genial ist, aber manchmal auch nicht besonders geschickt. Daher müssen wir die Linie „beenden“ bzw. den Kreis als eigenständiges Objekt beginnen über befinPath().

c.beginPath();
c.arc( 250, 250, 50, 0, Math.PI * 2, false);
c.stroke();

Jetzt bekommt unser Kreis noch eine eigene Farbe. Diesmal geben wir die Farbe direkt über den englischen Farbnamen an:

c.beginPath();
c.arc( 250, 250, 50, 0, Math.PI * 2, false);
c.strokeStyle = 'orange';
c.stroke();

Wollen wir nun viele Kreise, können wir die Kreisanweisungen in eine Schleife packen. Wir wollen nun 5 Kreise – daher durchlaufen die Schleife 5-mal.

for (var x = 0, x < 5; x++) {
c.beginPath();
c.arc( 250, 250, 50, 0, Math.PI * 2, false);
c.strokeStyle = 'orange';
c.stroke();
}

Nun wollen wir die Kreise natürlich nicht übereinander, sondern durch Zufall verteilt. Also geben wir über JavaScript-Anweisung random() einen zufälligen Wert für unseren X- und Y-Wert.

for (var x = 0, x < 5; x++) {
	var x = Math.random();
	var y = Math.random();
c.beginPath();
c.arc( x, y, 50, 0, Math.PI * 2, false);
c.strokeStyle = 'orange';
c.stroke();
}

Allerdings erhalten wir bei der Math-Funktion nur Werte zwischen 0 und 1. Dies sehen wir auch schön, wenn wir über die console-Anweisung uns die Werte ausgeben lassen.

for (var x = 0, x < 5; x++) {
	var x = Math.random();
	var y = Math.random();
	console.log(x, y);
c.beginPath();
c.arc( x, y, 50, 0, Math.PI * 2, false);
c.strokeStyle = 'orange';
c.stroke();
}

Wir benötigen also die maximale Breite, die wir mit dem zufälligen Wert multiplizieren.

Am Anfang haben wir eine Breite von 600 Pixel und eine Höhe von 400 Pixel für unser Canvas-Element festgelegt.

for (var x = 0, x < 5; x++) {
	var x = Math.random() * 600;
	var y = Math.random() * 300;
	console.log(x, y);
c.beginPath();
c.arc( x, y, 50, 0, Math.PI * 2, false);
c.strokeStyle = 'orange';
c.stroke();
}

Noch geschickter ist, wenn wir aus den festen Angaben herauskommen. Daher können wir über die Elementbreite diesen Wert abfragen.

for (var x = 0, x < 5; x++) {
	var x = Math.random() * window.innerWidth;
	var y = Math.random() * window.innerHeight;
	console.log(x, y);
c.beginPath();
c.arc( x, y, 50, 0, Math.PI * 2, false);
c.strokeStyle = 'orange';
c.stroke();
}

Wollen wir noch die Größe variieren, macht es Sinn ein Minimum vorzugeben und nur bis zu einem Maximum zu gehen.

Unser Radius soll zwischen 30 und 150 sich bewegen. Also geben wir unserem random-Wert als Multiplikator den Wert 120 und addieren noch 30. Somit haben wir auf jeden Fall Mindestens 30 als Radius und Maximal 150.

var r = Math.random() * 120 + 30;

Und das Ganze als Ausgabe mit unseren verschiedenen Kreisen:

for (var x = 0, x < 5; x++) {
	var x = Math.random() * window.innerWidth;
	var y = Math.random() * window.innerHeight;
var r = Math.random() * 120 + 30;
	console.log(x, y, r);
c.beginPath();
c.arc( x, y, r, 0, Math.PI * 2, false);
c.strokeStyle = 'orange';
c.stroke();
}

Wollen wir noch die Farbe per Zufall festlegen, nutzen wir am besten die Angabe rgb – hier wissen wir, dass dezimale Werte zwischen 0 und 255 haben.

Für unsere zufällige Angabe der Farbe benötigen wir also:

var farbwert_r = Math.floor( Math.random() * 255 ); 
var farbwert_g = Math.floor( Math.random() * 255 ); 
var farbwert_b = Math.floor( Math.random() * 255 ); 

Und das Ganze in unseren bestehenden Code:

for (var x = 0, x < 5; x++) {
	var x = Math.random() * window.innerWidth;
	var y = Math.random() * window.innerHeight;
var r = Math.random() * 120 + 30;
var farbwert_r = Math.floor( Math.random() * 255 ); 
var farbwert_g = Math.floor( Math.random() * 255 ); 
var farbwert_b = Math.floor( Math.random() * 255 ); 
	console.log(x, y, r, farbwert_r, farbwert_g, farbwert_b);
c.beginPath();
c.arc( x, y, r, 0, Math.PI * 2, false);
c.strokeStyle = 'rgb(farbwert_r, farbwert_g, farbwert_b)';
c.stroke();
}