JavaScript Canvas

Czy kiedykolwiek korzystałeś z aplikacji Windows Paint? Powiedzmy, że to zrobiłeś, ale co, jeśli chcesz narysować kształty, linie, SMS -y i grafikę 2D lub 3D online w przeglądarce internetowej, co robisz? Tutaj pojawia się HTML 5 Canvas, w którym pozwala nam rysować grafikę 2D lub 3D w przeglądarce.

Ten pismo potwierdzi Cię

• Co to jest płótno
• Jak aktywować płótno za pomocą JavaScript
• Jak zmienić rozmiar płótna za pomocą JavaScript
• Jak tworzyć kształty na płótnie za pomocą JavaScript

Co to jest płótno

Canvas to pojemnik, który pozwala nam rysować różne kształty, linie i teksty w przeglądarce. Domyślnie pojemnik na płótnie jest niewidoczny i nie ma granicy. Aby to było widoczne, używamy znacznika HTML 5 i właściwości granicznej CSS.

Składnia:

Powyższa składnia wyświetla tylko prosty pojemnik z granicą.

Jak aktywować płótno za pomocą JavaScript

Zasadniczo Canvas jest znacznikiem HTML 5, ale działa tylko za pomocą JavaScript. Poniższy kod jest obowiązkowy w celu uzyskania dostępu i aktywowania płótna.

Kod:

const canvas = dokument.QuerySelelect („#canvas”);
const contxt = płótno.getContext („2d”);

W tym kodzie używamy metody QuerySelelect (), aby uzyskać identyfikator Canvas, który podłączy nasz kod JavaScript za pomocą znacznika Canvas. Następnie używamy metody getContext () do określenia środowiska płótna (2d lub 3d).

Jak zmienić rozmiar płótna za pomocą JavaScript

Używamy kodu JavaScript, aby podać właściwości wysokości i szerokości obiektów płóciennych. Jeśli użyjemy CSS, aby nadać wysokość i szerokość na płótnie pojemnik, pikseluje pojemnik, a nie rozmiar go. Więc użyj następującego kodu JavaScript, aby zmienić rozmiar kontenera na płótnie.

Składnia:

płótno.Wysokość = 200;
płótno.szerokość = 400;

Jak tworzyć kształty na płótnie za pomocą JavaScript

Teraz zobaczymy, jak możemy tworzyć różne kształty na płótnie za pomocą JavaScript.

Prostokąt

Do utworzenia prostokąta na płótnie używany jest następujący kod JavaScript.

Składnia:

nazwa_zmienna.Strokerect (value_x, value_y, szerokość, wysokość)

Tutaj nazwa zmiennej reprezentuje zmienną, którą utworzyliśmy dla metody getContext (). Podczas gdy metoda STOCKRECT () przyjmuje cztery parametry, w których wartość x i wartość y reprezentują pozycję na płótnie, w której chcesz narysować kształt (prostokąt). Podczas gdy szerokość i wysokość są używane do wspomniania o rozmiarze prostokąta.

Kod:

contxt.Strokerect (50 50 50,100)

W tym kodzie tworzono prostokąt z szerokością 250px i wysokości 100px.

Wyjście:

W przypadku, gdy chcesz zmienić kolor prostokąta, po prostu dodaj następujący kod przed kodem tworzenia prostokąta:

Kod:

contxt.strokeStyle = ”Blue”;

Wyjście:

Wypełniony prostokąt

Do utworzenia wypełnionego prostokąta na płótnie używany jest następujący kod JavaScript.

Składnia:

nazwa_zmienna.FillRect (value_x, value_y, szerokość, wysokość)

Metoda FillRect () przyjmuje również cztery parametry i jest używana do utworzenia wypełnionego prostokąta.

Kod:

contxt.FillRect (50 50 50,100)

Wyjście:

Aby zmienić kolor prostokąta, użyj właściwości FillStyle przed kodem tworzenia prostokąta:

Kod:

contxt.FillStyle = ”aqua”;

Wyjście:

Koło

Do utworzenia okręgu na płótnie używany jest następujący kod JavaScript.

Składnia:

nazwa_zmienna.ARC (wartość-x, wartość-y, okrąg-radius, kąt startowy, kąt końcowy);
nazwa_zmienna.udar mózgu();

Tutaj metoda Arc () przyjmuje pięć parametrów, w tym wartość X i wartość Y reprezentujących położenie okręgu, promień koła, kąt początkowy i wartość kątu końcowego. Stosuje się metodę Stroke (), narysuj ścieżkę koła, która ostatecznie wyświetli koło.

Kod:

contxt.Arc (180, 100, 80, 0, 2 * matematyka.LICZBA PI);
contxt.udar mózgu();

Wyjście:

Linia

Do utworzenia linii na płótnie używany jest następujący kod JavaScript.

Składnia:

nazwa_zmienna.początek ();
nazwa_zmienna.Moveto (wartość-x, wartość-y);
nazwa_zmienna.Lineto (punkt startowy, punkt końcowy);
nazwa_zmienna.udar mózgu();

W tej składni,

Metoda początkowa () uruchamia ścieżkę,

Metoda moveto () przyjmuje dwie wartości x i y, które przesuwa kursor do określonego punktu.

Metoda Lineto () przyjmuje również dwie wartości, punkt początkowy od miejsca, w którym zaczyna się linia i punkt końcowy, w którym kończy się linia.

Metoda Stroke () służy do narysowania ścieżki linii, która ostatecznie wyświetli linię.

Kod:

contxt.początek ();
contxt.Moveto (50,50);
contxt.Lineto (300 150);
contxt.udar mózgu();

Wyjście:

Tekst

Do pisania tekstu na płótnie używany jest następujący kod JavaScript.

Składnia:

nazwa_zmienna.font = "font-wielkości font-family";
nazwa zmiennej.FillStyle = "Color";
nazwa zmiennej.FillText („Wyświetlanie-text”, wartość-x, wartość-y);

Najpierw musisz wspomnieć o wielkości czcionki i rodzinie czcionek za pomocą właściwości czcionki. Po drugie, podaj kolor, jeśli chcesz korzystać z właściwości FillStyle. Na koniec metoda FillText () przyjmuje trzy wartości, tekst, wartość x i wartość y.

Kod:

contxt.font = "50px arial";
contxt.FillStyle = „LightGreen”;
contxt.FillText („Canvas”, 110, 120)

Wyjście:

Pusty tekst

Do pisania pustego tekstu na płótnie używany jest następujący kod JavaScript.

Składnia:

nazwa_zmienna.font = "font-wielkości font-family";
nazwa zmiennej.strokeStyle = "Color";
nazwa zmiennej.strokeText („Displaying-Text”, wartość-x, wartość-y);

Tutaj metoda stroketext () służy do pisania tekstu w pustym stylu…

Kod:

contxt.font = "50px arial";
contxt.strokeStyle = "Orange";
contxt.StrokeText („Canvas”, 110, 120)

Wyjście:

Wniosek

Canvas to sztuka do rysowania grafiki 2D lub 3D w przeglądarce. W tym artykule dowiedzieliśmy się, jak możemy narysować okrąg, prostokąt, linię i tekst na płótnie przez JavaScript. Chociaż płótno jest znacznikiem HTML5, ale operacje na płótnie można wykonać tylko za pomocą kodu JavaScript.