Podręcznik referencyjny Canvas HTML

Podręcznik referencyjny Canvas HTML

Tag <canvas> HTML służy do dynamicznego rysowania grafiki za pomocą skryptów (zwykle JavaScript)

Aby uzyskać więcej informacji na temat <canvas>, przeczytaj naszą lekcję HTML Canvas.

Kolor, styl i cień

Atrybuty Opis
fillStyle Ustaw lub zwróć kolor, gradient lub wzór używany do wypełnienia
strokeStyle Ustaw lub zwróć kolor, gradient lub wzór używany do konturu
shadowColor Ustaw lub zwróć kolor cienia
shadowBlur Ustaw lub zwróć poziom rozmycia cienia
shadowOffsetX Ustaw lub zwróć poziomą odległość cienia od kształtu
shadowOffsetY Ustaw lub zwróć pionową odległość cienia od kształtu
Metoda Opis
createLinearGradient() Utwórz liniowy gradient (używany w zawartości płótna)
createPattern() Powtarzaj określone elementy w określonym kierunku
createRadialGradient() Utwórz promienisty/okrągły gradient (używany w zawartości płótna)
addColorStop() Określ kolory i pozycje zatrzymania w obiekcie gradientu

Styl linii

Atrybuty Opis
lineCap Ustaw lub zwróć styl końca linii
lineJoin Ustaw lub zwróć typ kąta, który tworzy się, gdy dwie linie się przecinają
lineWidth Ustaw lub zwróć bieżącą szerokość linii
miterLimit Ustaw lub zwróć maksymalną długość nachylenia

Prostokąt

Metoda Opis
rect() Utwórz prostokąt
fillRect() Narysuj 'wypełniony' prostokąt
strokeRect() Narysuj prostokąt (bez wypełnienia)
clearRect() Wyczyść określone piksele w danym prostokącie

Ścieżka

Metoda Opis
fill() Wypełnij bieżącą rysunkę (ścieżkę)
stroke() Rysuj zdefiniowaną ścieżkę
beginPath() Rozpocznij nową ścieżkę lub zresetuj bieżącą ścieżkę
moveTo() Przenieś ścieżkę do określonego punktu na płótnie, bez tworzenia linii
closePath() Utwórz ścieżkę, która wraca do punktu początkowego
lineTo() Dodaj nowy punkt i utwórz linię od tego punktu do ostatnio określonego punktu na płótnie
clip() Wyciąć dowolny kształt i rozmiar obszaru z oryginalnego rysunku
quadraticCurveTo() Tworzy krzywą dwustopniową
bezierCurveTo() Tworzy krzywą trójstopniową
arc() Tworzy łuk lub krzywą (do tworzenia okręgów lub ich części)
arcTo() Tworzy łuk lub krzywą między dwoma promieniami
isPointInPath() Zwraca true, jeśli określony punkt znajduje się w bieżącej ścieżce, w przeciwnym razie zwraca false

Transformacja

Metoda Opis
scale() Skaluje bieżące rysowanie do większego lub mniejszego
rotate() Obraca bieżące rysowanie
translate() Prześuwa bieżącą pozycję (0,0) na płótnie
transform() Zastępuje bieżącą macierz transformacji rysowania
setTransform() Przywraca bieżącą transformację do macierzy jednostkowej. Następnie uruchom transform().

Tekst

Atrybuty Opis
font Ustawia lub zwraca bieżące atrybuty czcionki tekstu
textAlign Ustawia lub zwraca bieżący sposób wyrównania tekstu
textBaseline Ustawia lub zwraca bieżącą bazę tekstu używaną do rysowania
Metoda Opis
fillText() Rysowanie 'wypełnionego' tekstu na płótnie
strokeText() Rysowanie tekstu na płótnie (bez wypełnienia)
measureText() Zwraca obiekt zawierający szerokość tekstu określonego

Rysowanie obrazu

Metoda Opis
drawImage() Rysowanie obrazu, płótna lub wideo na płótnie

Operacje na pixelach

Atrybuty Opis
width Zwraca szerokość obiektu ImageData
height Zwraca wysokość obiektu ImageData
data Zwraca obiekt, który zawiera dane obrazu określonego obiektu ImageData
Metoda Opis
createImageData() Tworzy nowy, pusty obiekt ImageData
getImageData() Zwraca obiekt ImageData, który zawiera dane pikseli kopii prostokąta na płótnie
putImageData() Wraca dane obrazu (z określonego obiektu ImageData) na płótno

Syntetyzacja

Atrybuty Opis
globalAlpha Ustawia lub zwraca bieżącą wartość alpha lub przezroczystości rysowania
globalCompositeOperation Ustawia lub zwraca nowy sposób rysowania obrazu na istniejącym obrazie

Inne

Metoda Opis
save() Zapisuje bieżący stan środowiska
restore() Zwraca stan ścieżki i atrybuty zapisane wcześniej
createEvent() 　
getContext() 　
toDataURL()