[ Leksykon ] [ HTML ] [ JavaScript ] [ Obiekty ] [ canvas ]

Obiekt CanvasRenderingContext2D()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

 

Cienie CanvasRenderingContext2D():

shadowBlur - Określa efekt rozmycia, domyślnie: 0
shadowColor - Kolor cienia, domyślnie całkowicie przezroczysty czarny
shadowOffsetX - Odległość pozioma, na którą cień zostanie przesunięty, domyślnie: 0
shadowOffsetY - Odległość pionowa, na którą cień zostanie przesunięty, domyślnie: 0

Filtry CanvasRenderingContext2D():

filter - Stosuje filtr CSS lub SVG do płótna, np. w celu zmiany jego jasności lub rozmycia

Gradienty i wzory CanvasRenderingContext2D():

createConicGradient() - Tworzy gradient stożkowy wokół punktu określonego przez współrzędne
createLinearGradient() - Tworzy gradient liniowy wzdłuż linii określonej przez współrzędne
createRadialGradient() - Tworzy gradient promieniowy określony przez współrzędne dwóch okręgów
createPattern() - Tworzy powtarzający wzór obrazu, powtarza w kierunkach określonych. Zwraca CanvasPattern

Komponowanie CanvasRenderingContext2D():

globalAlpha - Wartość alfa stosowana do kształtów i obrazów przed ich nałożeniem na canvas, Domyślny 1.0 nieprzezroczysty
globalCompositeOperation - Zastosowaniu ustawia sposób rysowania kształtów i obrazów na istniejącej mapie bitowej

Manipulacja pikselami CanvasRenderingContext2D():

createImageData() - Tworzy nowy, pusty ImageData obiekt o określonych wymiarach
getImageData() - Zwraca ImageData obiekt reprezentujący podstawowe dane pikseli dla obszaru
putImageData() - Maluje dane z ImageData obiektu na płótnie

Rysowanie obrazów CanvasRenderingContext2D():

drawImage() - Rysuje określony obraz

Rysowanie prostokątów CanvasRenderingContext2D():

clearRect() - Ustawia wszystkie piksele w prostokącie na przezroczystą czerń, usuwając całą wcześniej narysowaną zawartość
fillRect() - Rysuje wypełniony prostokąt w pozycji x, y
strokeRect() - Maluje na płótnie prostokąt, punkt początkowy x, y oraz szerokość i wysokość, bieżący styl obrysu

Rysowanie ścieżek CanvasRenderingContext2D():

fill() - Wypełnia bieżące ścieżki podrzędne bieżącym stylem wypełnienia
stroke() - Obrysowuje bieżące ścieżki bieżącym stylem obrysu
drawFocusIfNeeded() - Jeśli dany element jest fokus, metoda ta rysuje pierścień wokół bieżącej ścieżki
scrollPathIntoView() - Eksperymentalny. Przewija bieżącą ścieżkę lub daną ścieżkę do widoku
clip() - Tworzy ścieżkę przycinającą
isPointInPath() - Raportuje, czy określony punkt znajduje się w bieżącej ścieżce
isPointInStroke() - Raportuje, czy określony punkt znajduje się w obszarze objętym obrysem ścieżki

Stan płótna CanvasRenderingContext2D():

save() - Zapisuje bieżący stan stylu rysunku przy użyciu stosu, można cofnąć wszelkie zmiany restore()
restore() - Przywraca stan stylu rysunku do zapisanego przez save()
canvas - Odwołanie wsteczne tylko do odczytu do pliku HTMLCanvasElement
getContextAttributes() - Zwraca obiekt zawierający atrybuty kontekstu używane przez przeglądarkę
reset() - Resetuje kontekst renderowania, w tym bufor zapasowy, stos stanu rysunku, ścieżkę i style
isContextLost() - Eksperymentalny. Zwraca true, jeśli kontekst renderowania został utracony

Style linii CanvasRenderingContext2D():

lineWidth - Szerokość linii. Domyślne 1.0
lineCap - Rodzaj zakończeń na końcach linii. Możliwe wartości: butt (domyślne), round, square
lineJoin - Określa typ narożników, w których spotykają się dwie linie. Możliwe wartości: round, bevel, miter (domyślne)
miterLimit - Współczynnik graniczny skosu. Domyślne 10
getLineDash() - Zwraca tablicę bieżącego wzoru linii przerywanej zawierającą parzystą liczbę liczb nieujemnych
setLineDash() - Ustawia bieżący wzór przerywanej linii
lineDashOffset - Określa, gdzie rozpocząć tablicę myślników w linii

Style wypełnień i obrysów CanvasRenderingContext2D():

fillStyle - Kolor lub styl wypełnienia do wykorzystania wewnątrz kształtów, domyślny #000 czarny
strokeStyle - Kolor lub styl linii obrysu wokół kształtów, domyślny #000 czarny

Ścieżki, manipulowania ścieżkami obiektów CanvasRenderingContext2D():

beginPath() - Rozpoczyna nową ścieżkę
closePath() - Punkt pióra cofa się na początek bieżącej ścieżki, linię prostą od bieżącego punktu do początku
moveTo() - Rozpoczyna nową podścieżkę w punkcie x, y
lineTo() - dodaje linię prostą do bieżącej ścieżki podrzędnej z określonymi współrzędnymi x, y
bezierCurveTo() - Dodaje sześcienną krzywą Béziera do bieżącej ścieżki
quadraticCurveTo() - Dodaje kwadratową krzywą Béziera do bieżącej ścieżki
arc() - Tworzy łuk kołowy o środku (x, y) i promieniu radius
arcTo() - Dodaje do aktualnej ścieżki łuk o podanych punktach kontrolnych i promieniu
ellipse() - Dodaje łuk eliptyczny do bieżącej ścieżki
rect() - Tworzy ścieżkę dla prostokąta w pozycji x, y, o rozmiarze szerokość i wysokość
roundRect() - Tworzy ścieżkę dla zaokrąglonego prostokąta, promieniach narożników

Tekst CanvasRenderingContext2D():

fillText() - tekst w pozycji x, y, maxWidth
strokeText() - Rysuje kontury tekstu w podanej pozycji x, y,  maxWidth
measureText() - Zwraca TextMetrics obiekt, z właściwościami tekstu

Tekst, style tekstu CanvasRenderingContext2D():

font - Ustawienie czcionki. Wartość domyślna 10px sans-serif
textAlign - Ustawienie wyrównania tekstu, wartości: start (domyślne), end, left, right, center
textBaseline - Ustawienie wyrównania linii bazowej, wartości: top, hanging, middle, alphabetic, ideographic, bottom
direction - Kierunkowość, wartości: ltr, rtl, inherit (domyślne)
letterSpacing - Odstępy między literami, domyślnie: 0px
fontKerning - Kerning czcionki, odstępy między literami wartości: auto (domyślne), normal, none
fontStretch - Eksperymentalny. Rozciągnięcie czcionki, wartości: ..., normal (domyślnie)
fontVariantCaps - Eksperymentalny. warianty czcionki, wartości: ..., normal (domyślne)
textRendering - Renderowanie tekstu, wartości: auto, optimizeSpeed, optimizeLegibility, geometricPrecision
wordSpacing - Odstępy między wyrazami. Domyślna wartość: 0px

Transformacje CanvasRenderingContext2D() (czytaj: DOMMatrix):

getTransform() - Pobiera bieżącą macierz transformacji zastosowaną do kontekstu
rotate() - Dodaje obrót do macierzy transformacji. Kąt obrotu w prawo i jest wyrażony w radianach
scale() - Dodaje transformację skalowania do jednostek obszaru roboczego x w poziomie i y w pionie.
translate() - Dodaje transformację, przesuwając płótno x w poziomie i y w pionie
transform() - Mnoży aktualną macierz transformacji przez macierz opisaną przez jej argumenty
setTransform() - Resetuje bieżącą transformację, a następnie wywołuje metodę transform() z argumentami
resetTransform() - Resetuje bieżącą transformację przez macierz tożsamości

Wygładzanie obrazu CanvasRenderingContext2D():

imageSmoothingEnabled - Tryb wygładzania obrazu, jeśli ta opcja jest wyłączona, obrazy nie będą wygładzane w skalowaniu
imageSmoothingQuality - Umożliwia ustawienie jakości wygładzania obrazu

  

Przykłady:

// html
<canvas id="canvas"></canvas>

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.canvas; // Wartość obiekt HTMLCanvasElement

 

Opis:
Interfejs CanvasRenderingContext2D zapewnia kontekst renderowania 2D dla powierzchni rysunkowej elementu <canvas>. Służy do rysowania kształtów, tekstu, obrazów i innych obiektów. W przypadku OffscreenCanvas istnieje równoważny interfejs OffscreenCanvasRenderingContext2D zapewniający kontekst renderowania. Kontekst renderowania poza ekranem dziedziczy większość tych samych właściwości i metod, co CanvasRenderingContext2D. Aby uzyskać CanvasRenderingContext2Dinstancję, musisz najpierw mieć <canvas>element HTML:

<canvas id="gra" width="300" height="100"></canvas>

Aby uzyskać kontekst renderowania 2D płótna, wywołaj getContext() element <canvas>, podając '2d' jako argument:

const canvas = document.getElementById("gra");
const ctx = canvas.getContext("2d");

Mając pod ręką kontekst, możesz teraz narysować: 

ctx.strokeRect(75, 140, 100, 100);

   

Czytaj:
HTMLCanvasElement.getContext() - 
Interfejs CanvasPattern - 
Interfejs DOMMatrix - 
Interfejs HTMLCanvasElement() - 
Interfejs ImageData - 
Interfejs OffscreenCanvas - 
Interfejs OffscreenCanvasRenderingContext2D - 
Interfejs Path2D - 
Interfejs TextMetrics -