JavaScript -Leinwand

Haben Sie jemals eine Windows -Farbanwendung verwendet?? Sagen wir einfach, Sie haben es nur getan, aber was ist, wenn Sie in einem Webbrowser Formen, Linien, Texte und 2D- oder 3D -Grafiken online zeichnen möchten. Was tun Sie dann in einem Webbrowser?? Hier wird HTML 5 -Leinwand erhältlich.

Diese Beschreibung wird Sie anerkennen

• Was ist eine Leinwand?
• So aktivieren Sie eine Leinwand mit JavaScript
• So ändern Sie eine Leinwand mit JavaScript
• So erstellen Sie mit JavaScript Formen auf einer Leinwand mit JavaScript

Was ist eine Leinwand?

Leinwand ist ein Behälter, mit dem wir verschiedene Formen, Linien und Texte in einem Browser zeichnen können. Standardmäßig ist der Canvas -Container unsichtbar und hat keine Grenze. Um es sichtbar zu machen.

Syntax:

Die obige Syntax zeigt nur einen einfachen Behälter mit einem Rand an.

So aktivieren Sie eine Leinwand mit JavaScript

Grundsätzlich ist Leinwand ein HTML 5 -Tag, aber es ist nur mit Hilfe eines JavaScripts in Betrieb. Der folgende Code ist obligatorisch, um auf eine Leinwand zuzugreifen und zu aktivieren.

Code:

const canvas = dokument.querySelector ("#canvas");
const contxt = canvas.getContext ("2d");

In diesem Code verwenden wir die Methode querySelector (), um die Canvas -ID zu erhalten, mit der unser JavaScript -Code mit dem Canvas -Tag verbindet. Anschließend verwenden wir die GetContext () -Methode, um die Umgebung einer Leinwand (2D oder 3D) anzugeben.

So ändern Sie eine Leinwand mit JavaScript

Wir verwenden JavaScript -Code, um die Eigenschaften von Canvas -Objekten Höhen- und Breiteneigenschaften zu ergeben. Wenn wir dem Canvas -Behälter CSS verwenden, um Größe und Breite zu verleihen. Verwenden Sie daher den folgenden JavaScript -Code, um die Größe des Canvas -Containers zu ändern.

Syntax:

Leinwand.Höhe = 200;
Leinwand.Breite = 400;

So erstellen Sie mit JavaScript Formen auf Canvas

Jetzt werden wir sehen, wie wir mit JavaScript verschiedene Formen auf Leinwand erstellen können.

Rechteck

Der folgende JavaScript -Code wird verwendet, um ein Rechteck auf der Leinwand zu erstellen.

Syntax:

Variablennamen.Strokerect (Value_x, Value_y, Breite, Höhe)

Hier stellt der Variablenname die Variable dar, die wir für die GetContext () -Methode erstellt haben. Während die StrockRect () -Methode vier Parameter nimmt, wobei der Wert x und der Wert y die Position auf der Leinwand darstellen, in der Sie die Form zeichnen möchten (Rechteck). Während Breite und Höhe die Größe des Rechtecks ​​erwähnt werden.

Code:

Contxt.Strokerect (50,50,250,100)

In diesem Code wird ein Rechteck mit einer Breite von 250px und einer Höhe von 100px erstellt.

Ausgang:

Falls Sie die Farbe des Rechtecks ​​ändern möchten, fügen Sie einfach den folgenden Code hinzu, bevor Ihr Rechteck -Erstellungscode:

Code:

Contxt.strokestyle = "blau";

Ausgang:

Gefülltes Rechteck

Der folgende JavaScript -Code wird verwendet, um ein ausgefülltes Rechteck auf der Leinwand zu erstellen.

Syntax:

Variablennamen.fillect (value_x, value_y, width, Höhe)

Die FillRect () -Methode nimmt auch die vier Parameter an und wird verwendet, um ein ausgefülltes Rechteck zu erstellen.

Code:

Contxt.FILLRECT (50,50,250,100)

Ausgang:

Um die Farbe des Rechtecks ​​zu ändern, verwenden Sie einfach die Fillstyle -Eigenschaft vor Ihrem Rechteck -Erstellungscode:

Code:

Contxt.fillstyle = "aqua";

Ausgang:

Kreis

Der folgende JavaScript -Code wird verwendet, um einen Kreis auf der Leinwand zu erstellen.

Syntax:

Variablennamen.ARC (Value-X, Value-y, Circle-Radius, Start-Winkel, End-Winkel);
Variablennamen.Schlaganfall();

Hier nimmt die ARC () -Methode fünf Parameter ein, einschließlich des Wertes x und des Werts y, der die Position des Kreises, des Kreises, des Startwinkels und des Endwinkelwerts darstellt. Die Stroke () -Methode wird verwendet. Zeichnen Sie einen Pfad des Kreises, der schließlich einen Kreis anzeigt.

Code:

Contxt.Bogen (180, 100, 80, 0, 2 * Mathematik.PI);
Contxt.Schlaganfall();

Ausgang:

Linie

Der folgende JavaScript -Code wird verwendet, um eine Zeile auf der Leinwand zu erstellen.

Syntax:

Variablennamen.beginPath ();
Variablennamen.MoveTo (Value-X, Value-Y);
Variablennamen.Lineto (Startpunkt, Endpunkt);
Variablennamen.Schlaganfall();

In dieser Syntax,

Die Methode beginnt mit BeginnPath () startet ein Pfad,

MOVETO () -Methode nimmt zwei Werte x und y auf.

Die Lineto () -Methode nimmt auch zwei Werte vor.

Die Stroke () -Methode wird verwendet, um einen Pfad der Linie zu zeichnen, der schließlich eine Linie anzeigt.

Code:

Contxt.beginPath ();
Contxt.MoveTo (50,50);
Contxt.Lineto (300.150);
Contxt.Schlaganfall();

Ausgang:

Text

Der folgende JavaScript -Code wird verwendet, um einen Text auf die Leinwand zu schreiben.

Syntax:

Variablennamen.font = "Schriftgröße Schriftfamilie";
Variablennamen.fillstyle = "color";
Variablennamen.filtext ("Anzeige-Text", Value-X, Value-Y);

Zunächst müssen Sie die Schriftgröße und die Schriftfamilie mit der Schriftart der Schriftart erwähnen. Zweitens geben Sie die Farbe an, wenn Sie die Fillstyle -Eigenschaft verwenden möchten. Zuletzt nimmt die filtext () -Methode drei Werte, Text, Wert x und Wert y.

Code:

Contxt.font = "50px arial";
Contxt.fillstyle = "lightgreen";
Contxt.filtext ("Canvas", 110, 120)

Ausgang:

Hohltext

Der folgende JavaScript -Code wird verwendet, um einen hohlen Text auf die Leinwand zu schreiben.

Syntax:

Variablennamen.font = "Schriftgröße Schriftfamilie";
Variablennamen.strokestyle = "color";
Variablennamen.stroketext ("Anzeige-Text", Value-X, Value-Y);

Hier wird Stroketext () -Methode verwendet, um Text in hohlem Stil zu schreiben…

Code:

Contxt.font = "50px arial";
Contxt.strokestyle = "orange";
Contxt.Stroketext ("Canvas", 110, 120)

Ausgang:

Abschluss

Canvas ist ein Kunstboard, um 2D- oder 3D -Grafiken auf einem Browser zu zeichnen. In diesem Artikel haben wir gelernt, wie wir einen Kreis, einen Rechteck, eine Linie und einen Text auf einer Leinwand durch JavaScript zeichnen können. Obwohl Canvas ein HTML5 -Tag ist, können die Vorgänge auf Leinwand nur mit Hilfe eines JavaScript -Codes durchgeführt werden.