Płótno w HTML | Wyjaśniono przykładami

Płótno w HTML | Wyjaśniono przykładami
W html, Tag można wykorzystać do rysowania grafiki na stronach internetowych. Płótno działają jako kontener dla grafiki i aby narysować grafikę, używamy skryptu takiego jak JavaScript. Dlatego w tag należy użyć atrybutu identyfikatora, który odnosi się element do JavaScript. Można go użyć do rysowania 2-wymiarowej grafiki, obrazów, animacji itp. Ten pismo przedstawia kompleksowy przewodnik dla tag za pomocą niektórych fragmentów kodu.

W tym artykule dowiemy się następujących koncepcji związanych z etykietka:

  • Podstawy tagu
  • Jak utworzyć element
  • Jak używać płótna z JavaScript
  • Jak narysować podstawowe kształty na płótnie

Zaczynajmy!

Podstawy tagu

Atrybuty identyfikatora, wysokości i szerokości są niezbędne dla każdego elementu. Atrybut id jest używany do odwoływania się do płótna w JavaScript, podczas gdy atrybuty wysokości i szerokości określają rozmiar płótna. W jednym dokumencie HMTL możemy mieć kilka tagów.

Jak utworzyć element

Zastanówmy się nad tym, że podbity fragment zrozumieją, jak utworzyć element płótna:

Tutaj Id = płótno, które zostaną wykorzystane w skrypcie do znalezienia elementu płótno, szerokości i wysokości Ustaw szerokość i wysokość płótna, ponieważ atrybut 250px i styl jest używany do stylizowania elementu płótna.

Jak używać płótna z JavaScript

W tej sekcji przedstawimy przewodnik krok po kroku do użycia elementu z JavaScript. Musimy wykonać poniżej wspomniane kroki, aby kontynuować:

Po pierwsze, musimy zdobyć element i do tego celu „GetElementId ()” Metoda zostanie wykorzystana, jak pokazano na poniższym fragmencie kodu:

Następnie utworzymy obiekt rysunkowy za pomocą obiektu wbudowanego „GetContext ()” I wewnątrz tego obiektu określamy wymiar taki jak 2-wymiarowy, jak pokazano na poniższym rysunku:

var objContext = może.getContext („2d”);

Ostatnim krokiem jest narysowanie na płótnie, określamy „FillStyle” właściwość, aby ustawić kolor rysunku:

objContext.FillStyle = „Gray”;

Jak narysować podstawowe kształty na płótnie

Ta sekcja rozwinę, jak narysować prostokąt, linię i okrążenie na płótnie:

Prostokąt

Aby narysować prostokąt na płótnie, użyjemy metody FillRect (). Potrzeba czterech wartości: najpierw dla współrzędnego X, drugi dla współrzędnego Y, trzeci dla szerokości i czwarty dla wysokości.

objContext.FillRect (10,10,175,85);

Oto nasz pełny fragment kodu, aby narysować prostokąt na płótnie:




W przypadku powyższego kodu otrzymamy następujące dane wyjściowe:

Jak określamy 10px przestrzeń dla x, y koordynuje się, więc na wyjściu przestrzeń wokół górnej i lewej strony weryfikuje, że nasz kod działa poprawnie.

Linia

Teraz rozważmy kolejny prosty przykład, aby zrozumieć, jak narysować linię na płótnie. Używamy Moveto () I Lineto () metoda określania odpowiednio początkowych i końcowych punktów linii. Aby narysować linię, musimy użyć metody udar mózgu() metoda:




Po pomyślnym wykonaniu kodu otrzymamy następujące dane wyjściowe:

Linia jest rysowana na płótnie, zaczynając od (0, 0) i kończącego się na (250, 150).

Koło

Aby narysować koło, wykorzystamy początek () I łuk() metody rozpoczęcia ścieżki i utworzenia odpowiednio koła. Metoda ARC przyjmuje wartości dla współrzędnych x, y, promień koła, kąt startowy i kąt końcowy.




Matematyka.Właściwość PI jest wykorzystywana jako punkt końcowy okręgu, a następujące będą wyjście:

W tej sekcji nauczyliśmy się rysować podstawowe kształty na płótnie, takie jak linia, okrąg i prostokąt.

Wniosek

Tag służy do rysowania grafiki na stronach internetowych za pomocą JavaScript i do narysowania kształtu na płótnie, wymagane są cztery niezbędne kroki i.mi. Utwórz swoje płótno, pobieraj element płótna za pomocą metody wbudowanej ”getElementById ()”, Utwórz swój obiekt za pomocą getContext () obiekt i wreszcie narysuj kształty na płótnie. Pierwsza połowa tego zapisu wykazała, jak tworzyć i używać elementów płótna, a druga połowa tego samouczka wyjaśnia, jak rysować podstawowe kształty z płótna, takie jak linia, okrąg i prostokąt.