Wie mache ich einen Kreis in HTML Canvas

HTML5 Dies ist die fünfte Version der Hypertext Markup-Sprache, die neue und umfangreiche Funktionen zum Erstellen dynamischer Inhalte auf Webseiten enthält. Eine der interessantesten Neuerungen ist die Möglichkeit, Grafiken direkt auf einer Webseite mit einem Element zu zeichnen und zu erstellen Canvas.

Verwenden eines Elements Canvas und mit JavaScript können Sie verschiedene Formen und Formen einschließlich Kreise erstellen. Die Kreise können vollständig eingefärbt, gestrichen oder mit unterschiedlichen Farb- und Stileigenschaften versehen sein. Sie können zum Erstellen von Diagrammen, Diagrammen, Animationen und zur Visualisierung von Daten verwendet werden.

Um einen Kreis in HTML-Canvas zu erstellen, müssen Sie mehrere Methoden und Eigenschaften verwenden. Mit der Methode beginPath() sie definieren einen neuen Pfad, der zum Zeichnen des Kreises verwendet wird. Dann mit Methoden arc() oder ellipse() Sie legen die Parameter des Kreises fest, z. B. die Mittelkoordinaten, den Radius und die Anfangs- und Endwinkel des Kreises. Schließlich mit der Methode fill() oder stroke() malen oder umkreisen Sie den Kreis entsprechend.

So erstellen Sie ein Canvas-Element

Das Canvas-Element in HTML ist ein Bereich, in dem Sie grafische Objekte mit JavaScript zeichnen können. Sie müssen ein Tag verwenden, um ein solches Element auf einer Webseite zu erstellen.

Im folgenden Beispielcode wird ein leeres Canvas-Element auf einer Webseite erstellt:

Im obigen Beispiel ist dies das Canvas-Elementtag. Es hat zwei Attribute: id, die einen eindeutigen Bezeichner für das Element angeben, und width/height, die die Breite und Höhe des Elements angeben.

Wenn mehrere Canvas-Elemente auf einer Webseite vorhanden sind, muss jedes Canvas-Element über eine eindeutige ID verfügen.

Nachdem Sie ein Canvas-Element erstellt haben, können Sie es verwenden, um verschiedene grafische Objekte mithilfe von JavaScript und den Methoden der Canvas-API zu zeichnen. Beispielsweise können Sie mit der getContext() -Methode den Zeichnungskontext abrufen und mit dem Zeichnen auf einem Canvas-Element beginnen.

Verwenden des Canvas-Kontexts

getContext - dies ist eine Methode, die von einem Element aufgerufen wird Canvas und akzeptiert das einzige Argument - den Zeichenkontext. Der am häufigsten verwendete Kontext - 2d.

Um den Zeichnungskontext zu erhalten 2d. der folgende Code wird verwendet:

const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d');

Nachdem Sie den Zeichnungskontext erhalten haben, können Sie mit dem Zeichnen auf der Leinwand beginnen. Um einen Kreis zu zeichnen, müssen Sie Methoden verwenden beginPath, arc und fill.

beginPath - die Methode beginnt einen neuen Zeichnungspfad.

arc - die Methode zeichnet einen Bogen oder Kreis. Es akzeptiert die folgenden Argumente: die Koordinaten des Mittelpunkts des Kreises, den Radius, den Anfangs- und Endwinkel im Bogenmaß und das Richtungsflag (standardmäßig false).

fill - die Methode füllt die von den Methoden erstellte Form aus beginPath und arc der angegebenen Farbe oder des angegebenen Stils.

Hier ist ein Beispielcode, der einen Kreis auf die Leinwand zeichnet:

ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2, false); ctx.fillStyle = 'red'; ctx.fill();

In diesem Beispiel sind die x- und y-Koordinaten der Mittelpunkt des Kreises, Radius ist der Radius des Kreises, ctx.fillStyle - die Farbe, mit der der Kreis gefüllt wird.

Nachdem der Code ausgeführt wurde, wird der Kreis an den angegebenen Koordinaten auf der Leinwand gezeichnet.

Zeichne einen Kreis auf Canvas

Um Formen auf einer HTML-Leinwand (Canvas) zu zeichnen, müssen Sie JavaScript und seine Methoden verwenden. Befolgen Sie diese Schritte, um einen Kreis zu zeichnen:

1. Erstellen Sie ein Canvas-Element in HTML: .
2. Suchen Sie in JavaScript nach dem Canvas-Element anhand seiner ID: const canvas = document.getElementById('myCanvas'); .
3. Holen Sie sich den Canvas-Kontext: const ctx = canvas.getContext('2d'); .
4. Verwenden Sie Kontextmethoden, um einen Kreis zu zeichnen:

// Нарисовать кругctx.beginPath();ctx.arc(x, y, радиус, начальный угол, конечный угол, против часовой стрелки);ctx.stroke();

• die x- und y-Koordinaten sind die Mittelpunkte des Kreises.
• radius ist der Radius eines Kreises.
• der Anfangswinkel und der Endwinkel sind der Winkel im Bogenmaß, an dem der Kreis beginnen und enden soll.
• entgegen dem Uhrzeigersinn - Ein boolescher Wert, der die Zeichnungsrichtung angibt (true ist gegen den Uhrzeigersinn, false ist im Uhrzeigersinn).

Im folgenden Beispiel wird ein Kreis gezeichnet:

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

Wenn Sie diesen Code kopieren und in ein HTML-Dokument einfügen, sehen Sie, dass ein Kreis in der Mitte der 200x200 Pixel großen Leinwand gezeichnet wird. Um die Größe der Leinwand zu ändern, ändern Sie einfach die Werte für die Attribute width und height des Canvas-Elements.

Festlegen der Farbe für den Kreis

Sie können die Eigenschaft verwenden, um die Kreisfarbe im HTML-Canvas festzulegen fillStyle Zeichenkontext.

Zuerst müssen wir den Zeichnungskontext für Canvas abrufen:

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

Dann können wir die Eigenschaft verwenden fillStyle zum Einstellen der Farbe:

Als Eigenschaftswert fillStyle sie können englische Farbnamen (z. B. 'rot' - rot), HEX-Farbcodes (z. B. '#FF0000' - rot) und andere gültige Farbwerte verwenden.

Um beispielsweise die Farbe des Kreises auf Grün festzulegen, können wir Folgendes verwenden:

Nachdem wir die Farbe eingestellt haben, können wir mit dem Zeichnen eines Kreises beginnen, indem wir Zeichenkontexttechniken wie beginPath, arc und fill.

Füllen eines Kreises mit Farbe

In einem HTML-Canvas können Sie einen Kreis erstellen und ihn dann mit einer Methode mit Farbe füllen fillStyle. Um dies zu tun, müssen Sie eine Farbe als Zeile angeben, die dann zum Ausfüllen des Kreises verwendet wird.

const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI * 2);ctx.fillStyle = 'red';ctx.fill();

In diesem Beispiel haben wir mit der Methode einen Kreis gezeichnet arc und dann die Farbe mit der Eigenschaft festgelegt fillStyle. In diesem Fall wird die Farbe des Kreises rot sein.

Sie können auch andere Farbformate wie RGB-, RGBA-, HEX- und andere Werte verwenden. Zum Beispiel:

ctx.fillStyle = 'rgb(255, 0, 0)'; // красный цветctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // полупрозрачный красный цветctx.fillStyle = '#ff0000'; // также красный цвет

Verwenden Sie Methoden arc und fill, um einen Kreis zu zeichnen und ihn entsprechend mit Farbe zu füllen. Dies ist eine einfache Möglichkeit, einen Kreis zu erstellen und ihm eine Farbe im HTML-Canvas zu geben.

Ändern der Größe eines Kreises

Um die Größe eines Kreises in Canvas zu ändern, müssen Sie die Methoden width und height des Zeichnungskontexts verwenden.

Mit den Methoden width und height können Sie die Bemaßungen der Leinwand festlegen, auf der gezeichnet wird. Standardmäßig entsprechen die Leinwandgrößen den Abmessungen des Browserfensters.

Um die Größe eines Kreises zu ändern, müssen Sie die Größe der Leinwand mithilfe der Methoden width und height ändern und den Kreis neu zeichnen.

const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");// Устанавливаем новые размеры полотнаcanvas.width = 400;canvas.height = 400;// Рисуем круг заново с новыми размерамиctx.beginPath();ctx.arc(200, 200, 100, 0, 2 * Math.PI);ctx.fillStyle = "red";ctx.fill();ctx.closePath();

Im obigen Beispiel legen wir die neuen Leinwandgrößen auf 400x400 Pixel fest und zeichnen einen Kreis mit einem Radius von 100 Pixeln mit einem Mittelpunkt in Koordinaten (200, 200).

Wenn Sie also die vorherigen Objekte beibehalten müssen, müssen Sie ihre Koordinaten speichern und sie nach der Größenänderung erneut zeichnen.

Hinzufügen von Animationen zu einem Kreis

Sie können die integrierten JavaScript-Funktionen verwenden, um einem Kreis auf einer HTML-Leinwand eine Animation hinzuzufügen. Hier ist ein Beispielcode:

Dieser Code erstellt eine Leinwand mit der ID "myCanvas" und legt ihre Größe fest. Es ruft dann den Kontext von der Leinwand ab und legt die Anfangsparameter für das Zeichnen des Kreises fest.

Die Funktion draw() ist für das Zeichnen und Animieren eines Kreises auf der Leinwand verantwortlich. Zuerst reinigt sie die Leinwand mit ctx.clearRect(). Sie zeichnet dann einen Kreis mit einem ctx.arc(), legt die Farbe mit ctx fest.fillStyle und beendet den Pfad mit ctx.closePath(). Der Radius wird dann um jeden Frame um 1 vergrößert.

Schließlich wird die Funktion requestAnimationFrame() aufgerufen, um die Funktion draw() erneut auszuführen und eine glatte Animation zu erstellen.

Jetzt können Sie diesen Code zu Ihrer Webseite hinzufügen und sehen, wie der Kreis seine Größe langsam vergrößert.

Hinzufügen von Ereignissen zu einem Kreis

Um dem Kreis im HTML-Canvas Ereignisse hinzuzufügen, können wir die addEventListener-Methode für das Canvas-Element verwenden. Diese Methode ermöglicht es uns, auf verschiedene Ereignisse zu warten, die auf einem Element auftreten können.

Betrachten wir ein Beispielcode:

In diesem Beispiel zeichnen wir zuerst einen Kreis mit den Canvas-Methoden. Dann fügen wir dem Canvas-Objekt einen Click-Ereignishandler hinzu. Innerhalb des Handlers verwenden wir die getBoundingClientRect-Methode und die event-Eigenschaften.clientX und event.clientY, um die Klickkoordinaten innerhalb des Canvas-Elements zu bestimmen. Dann prüfen wir, ob diese Koordinaten mit Hilfe der Okrinitätsgleichung in den Kreis gelangt sind.

Jetzt haben Sie eine grundlegende Vorstellung davon, wie Sie dem HTML-Canvas Ereignisse zu einem Kreis hinzufügen können.