Najlepszy samouczek HTML5 Canvas W 2024 r. W tym samouczku możesz dowiedzieć się Co jest na płótnie?,Pomoc Browser,Tworzenie płótnie (Canvas),Przykłady,Użyj JavaScript do rysowania grafiki,Przykłady,współrzędne na płótnie,Płótno - Path,Przykłady,Przykłady,Płótno - Text,Przykłady,Przykłady,Płótno - Gradient,Przykłady,Przykłady,Obrazy na płótnie -,Użyj obrazu:,Przykłady,Instrukcja HTML Canvas referencyjny,HTML <canvas> Tag,
<canvas> tag grafiki niestandardowe, takie jak wykresy i inne obrazy, należy użyć skryptu do rysowania grafiki.
Na płótnie (Canvas) narysuj prostokąt czerwony prostokąt, gradient, kolorowe prostokąty, a niektóre kolorowego tekstu.
HTML5 <canvas> Element służy do rysowania grafiki za pośrednictwem skryptów (zazwyczaj JavaScript), aby zakończyć.
<Canvas> jest graficznym opakowania, należy użyć skryptu do rysowania grafiki.
Można użyć Canva rysować ścieżki, pola, okręgi, znaki, oraz dodawanie obrazów za pomocą różnych metod.
Internet Explorer 9+, Firefox, Opera, Chrome, Safari i wsparcie <canvas> elementu.
Uwaga: Internet Explorer 8 i wcześniejsze wersje IE nie obsługuje <canvas> elementu.
Strona płótno jest prostokąt zostanie narysowany przez <canvas> elementu.
Uwaga: Domyślnie <canvas> elementu nie ma granic i treści.
<Canvas> Proste przykłady przedstawiają się następująco:
Uwaga: Etykieta zwykle trzeba określić atrybut id (skrypt często wymieniana), rozmiar, szerokość i wysokość atrybuty określają płótnie.
Wskazówka: Można użyć wielu <canvas> elementu na stronie HTML.
Korzystanie z atrybutu stylu, aby dodać obramowanie:
Sam element canvas nie czerpie moc. Wszystkie prace muszą być sporządzone w języku JavaScript wykonywane wewnętrznie:
Przykłady analizy:
Po pierwsze, znaleźć elementu <canvas>:
Następnie należy utworzyć obiekt kontekstu:
getContext ( "2d") obiekt jest wbudowany obiekt HTML5 ma kilka sposobów rysowania ścieżek, pudełek, koła, znaków i dodawanie zdjęć.
Poniższe dwa wiersze kodu narysować czerwony prostokąt:
Ustawianie właściwości fillStyle może być koloru CSS, gradient lub wzór. Domyślnym ustawieniem jest fillStyle # 000000 (czarny).
fillRect (x, y, szerokość,wysokość) Sposób definiuje wypełnioną prostokąta z obecnym sposobem.
Płótno jest siatką dwuwymiarową.
płótno współrzędne lewego górnego rogu (0,0)
Powyższa metoda ma parametry fillRect (0,0,150,75).
Oznacza to, że: Narysuj prostokąt 150x75 na płótnie od lewego górnego rogu (0,0).
Przykłady współrzędnych
Jak widać poniżej, współrzędne X i Y na płótnie na płótnie do malowania pozycjonowania. Ruch prostokąta myszy współrzędne lokalizacji wyświetlacza.
Na kanwie lakierni, będziemy korzystać z następujących dwóch metod:
Musimy narysować linię na stosowanie metod "Ink", takich jak udar mózgu ().
Definiowanie rozpocząć współrzędne (0,0) i współrzędne końcowe (200, 100), a następnie użyć metody udar (), aby narysować linię:
JavaScript:
Narysować okrąg na płótnie, będziemy używać w następujący sposób:
W rzeczywistości, użyliśmy podejścia "Ink", kiedy rysowanie okręgu, takich jak udar () lub wypełnić ().
Użyj łuku () aby narysować okrąg:
JavaScript:
Użyj płótna do rysowania tekstu, ważne właściwości i metody, co następuje:
Użyj fillText ():
Użyj czcionki "Arial" renderowania tekstu wysokiej 30px (stały) na płótnie:
JavaScript:
Użyj strokeText ():
Użyj czcionki "Arial" renderowania tekstu wysokiej 30px (drążony) na płótnie:
JavaScript:
Gradient mogą być wypełnione prostokąty, koła, linie, tekst, itp, różne kształty mogą definiować różne kolory.
Oto dwa różne sposoby ustawienia Canvas gradient:
Kiedy używamy obiektu gradientu, należy użyć dwóch lub więcej przystanków kolorów.
addColorStop () w celu określenia koloru przystanków, korzystanie współrzędne opisują parametry, które mogą być 0-1.
Korzystanie gradientu ustawienia fillStyle lub strokeStyle wartość gradientu, a następnie narysować kształty, takie jak prostokąty, tekstu lub linii.
Użyj createLinearGradient ():
Tworzenie gradientu liniowego. Użyć wypełnienia gradientowego prostokąt:
JavaScript:
Użyj createRadialGradient ():
Tworzenie promieniową / okrągły gradient. Użyć wypełnienia gradientowego prostokąt:
JavaScript:
Jeden obraz na płótnie, stosując następujące metody:
Obraz jest umieszczony na płótnie:
JavaScript:
Pełna własność etykiecie może odnosić Canvas poradniku.
Tag | 描述 |
---|---|
<canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |