00 Stimmen

HTML5 Canvas: Gefüllten Kreis zeichnen

Frage von PC Control | 22.05.2014 um 16:37

Im Internet habe ich einen Code gefunden, um mit HTML 5 einen Kreis zu zeichnen.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.beginPath();
context.arc(100, 100, 50, 0, 2*Math.PI);
context.stroke();

Dies zeichnet einen Kreis am Punkt 100/100 mit einem Radius von 50. Das funktioniert soweit.

Allerdings wird nur die Außenlinie vom Kreis gezeichnet. Ich hätte aber gerne einen mit Farbe gefüllten Kreis und nicht nur die Umrandung. Ist dies irgendwie möglich?

AntwortenPositivNegativ
1Beste Antwort1 Stimme

Wenn du dein Beispiel so erweiterst, kannst du die Farbe für den Rand und die Füllung angeben:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.beginPath();
context.arc(100, 100, 50, 0, 2*Math.PI);
context.strokeStyle = '#000000';
context.stroke();
context.fillStyle = '#FF0000';
context.fill();

Wichtig zu wissen ist hier, dass sich fill() um die Füllung kümmert und stroke() um die Linie der Umrandung.

Zunächst definierst du mit arc() einen Pfad. Dieser bleibt erst einmal unsichtbar.

Erst wenn du stroke() aufrufst, wird der Rand gezeichnet. Und zwar so, wie vorher mit strokeStyle definiert wurde. Hier haben wir einfach die Farbe #000000 (schwarz) gesetzt, so dass stroke() einen schwarzen Rand zeichnen wird.

Ähnlich verhält es sich mit fill(). Wir setzen zunächst den fillStyle auf #FF0000 (rot) und rufen anschließend fill() auf. Damit wird der aktuell definierte Pfad mit dem aktuellen fillStyle gefüllt.

Wenn wir nur die Füllung oder nur den Rand haben möchten, können wir entsprechend stroke() oder fill() weglassen.
22.05.2014 um 17:37

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.