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?
Ähnliche Themen
HTML5 Canvas: Einsteiger Tutorial Teil 3 - Rechtecke und Kreise
Tutorial | 0 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 1 - Einführung
Tutorial | 0 Kommentare
jQuery: HTML5 Canvas mit Ajax an Server senden
Tutorial | 0 Kommentare
HTML5 Canvas als Bild an Server senden und speichern
Tutorial | 0 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 2 - Linien zeichnen
Tutorial | 0 Kommentare
Bild vor dem Upload im Browser verkleinern
Tutorial | 5 Kommentare
HTML5 Canvas: Einsteiger Tutorial Teil 4 - Text auf Canvas schreiben
Tutorial | 0 Kommentare
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.
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