Interface CanvasRenderingContext2D – przegląd
Standard: Standard
CanvasRenderingContext2D implements CanvasDrawingStyles
CanvasRenderingContext2D implements CanvasPathMethods
Zwrotna referencja do canvas:readonly attribute HTMLCanvasElement canvas;
Właściwości
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
globalAlpha | Przezroczystość obowiązująca dla wszystkich konturów i wypełnień | dowolna liczba rzeczywista | 1.0 |
globalCompositeOperation | Określa obowiązującą zasadę składania kolorów dla wszystkich figur i obrazów wyświetlanych na canvas. | DOMString | "source-over" |
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
strokeStyle | Określa kolor lub styl obowiązujący dla konturów. Kolor lub styl jest zastosowany po wywołaniu funkcji stroke() | DOMString | "black" |
CanvasGradient | |||
CanvasPattern | |||
fillStyle | Określa kolor lub styl obowiązujący dla wypełnień. Kolor lub styl jest zastosowany po wywołaniu funkcji fill() | DOMString | "black" |
CanvasGradient | |||
CanvasPattern |
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
shadowOffsetX | Określa przesunięcie cienia względem figury w osi X | dowolna liczba rzeczywista | 0 |
shadowOffsetY | Określa przesunięcie cienia względem figury w osi Y | dowolna liczba rzeczywista | 0 |
shadowBlur | Określa wielkość (szerokość) cienia | dowolna liczba rzeczywista | 0 |
shadowColor | Określa kolor cienia | DOMString (kolor CSS) | "black" |
Zobacz właściwości z implementowanych interfejsów: CanvasDrawingStyles oraz CanvasPathMethods.
Funkcje
Typ zwracany | Nazwa | Opis |
---|---|---|
void | save() | Przenosi aktualny stan kontekstu na stos |
void | restore() | Pobiera ostatni zapisany stan kontekstu ze stosu. Pobrany stan staje się stanem canvas |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
CanvasGradient | createLinearGradient(x0,y0,x1,y1) | x,y – są dowolnymi liczbami rzeczywistymi | Tworzy gradient liniowy od punktu (x0,y0) do punktu (x1,y1). |
CanvasGradient | createRadialGradient(x0,y0,r0,x1,y1,r1) | x,y,r – są dowolnymi liczbami rzeczywistymi | Tworzy gradient radialny rozpięty między dwoma kołami o podanych położeniach środków i podanych promieniach. |
Canvas Pattern | createPattern(element, powtórzenie) | element: HTMLImageElement image | HTMLCanvasElement canvas | HTMLVideoElement video powtórzenie: DOMString |
Tworzy deseń (teksturę). Podstawą deseniu może być obrazek, canvas lub wideo. Dopuszczalne wartości da powtórzenia to: ‘repeat’, ‘no-repeat’,’ repeat-x’ i ‘repeat-y’. |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | scale(x,y) | x – dowolna liczba rzeczywista – określa zmianę wymiarów wzdłuż osi X y – dowolna liczba rzeczywista – określa zmianę wymiarów wzdłuż osi Y |
Dodaje skalowanie do aktualnej macierzy transformacji |
void | rotate(angle) | angle – dowolna liczba rzeczywista oznaczająca kąt w radianach |
Dodaje obrót w kierunku ruchu wskazówek zegara, o podany kąt do aktualnej macierzy transformacji |
void | translate(x,y) | x – dowolna liczba rzeczywista – określa przesunięcie wzdłuż osi X y – dowolna liczba rzeczywista – określa przesunięcie obiektu wzdłuż osi Y |
Dodaje przesunięcie do aktualnej macierzy transformacji |
void | transform(a,b,c,d,e,f) | a,b,c,d,e,f – dowolne liczby rzeczywiste | Mnoży aktualną macierz transformacji przez podaną macierz |
void | setTransform(a,b,c,d,e,f) | a,b,c,d,e,f – dowolne liczby rzeczywiste | Zastępuje aktualną macierz transformacji przez podaną transformację |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | clearRect(x,y,w,h) | x,y,w,h – dowolne liczby rzeczywiste określające kolejno położenie lewego górnego rogu prostokąta oraz jego szerokość i wysokość |
Czyści piksele wybranego prostokąta |
void | fillRect(x,y,w,h) | x,y,w,h – dowolne liczby rzeczywiste określające kolejno położenie lewego górnego rogu prostokąta oraz jego szerokość i wysokość |
Rysuje wypełnienie prostokąta o podanych parametrach (nie wymaga polecenia fill()) |
void | strokeRect(x,y,w,h) | x,y,w,h – dowolne liczby rzeczywiste określające kolejno położenie lewego górnego rogu prostokąta oraz jego szerokość i wysokość |
Rysuje kontur prostokąta o podanych parametrach (nie wymaga polecenia stroke()) |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | beginPath() | – | Rozpoczyna nową ścieżkę (ustawia liczbę podścieżek na 0). Jakiekolwiek ścieżki ustanowione ale nie narysowane nie zostaną wyświetlone. |
void | fill() | – | Wypełnia wszystkie otwarte podścieżki i zakańcza je. |
void | stroke() | – | Odrysowuje wszystkie kontury aktualnej ścieżki. |
void | drawFocusIfNeeded(element) | Element element | ? |
void | clip() | – | Tworzy nowy region przycinania przez utworzenie iloczynu aktualnego obszaru przycinania i powierzcni zdefiniowanej przez aktualną ścieżkę. |
boolean | isPointInPath(x,y) | x,y- dowolne liczby rzeczywiste | Określa czy punkt o podanych współrzędnych (x,y) znajduje się w obrębie ścieżki. |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | fillText(text,x,y, maxWidth) | DOMString text x,y,maxWidth -dowolne liczby rzeczywiste maxWidth – jest elementem opcjonalnym |
Wypełnia podany tekst i wyświetla go w miejscu o podanych współrzędnych. |
void | strokeTekst(text,x,y, maxWidth) |
DOMString text |
Konturuje podany tekst i wyświetla go w miejscu o podanych współrzędnych. |
TextMetrics | measureText(text) | DOMString text | Wykonuje pomiar podanego tekstu. |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | drawImage(image, x,y) | x,y – dowolne liczby rzeczywiste element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement |
Odrysowuje pobrany element w punkcie o współrzędnych (x,y). |
void | drawImage(image, x,y,w,h) | x,y,w,h – dowolne liczby rzeczywiste element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement |
Odrysowuje pobrany element w punkcie o współrzędnych (x,y). Narysowany element ma podaną szerokość i wysokość. |
void | drawImage(image, sx,sy,sw,sh, x,y,w,h) | sx,sy,sw,sh,x,y,w,h – dowolne liczby rzeczywiste element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement |
Odrysowyje pobrany z obrazka prostokąt o współrzędnych (sx,sy,sw,s). Obrazek jest rysowany w prostokącie o wymiarach (x,y,w,h). |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | addHitRegion(options) | HitRegionOptions options | Dodaje obszar kolizji o podanych opcjach options |
void | removeHitRegion(id) | DOMString id | Usuwa obszar kolizji o podanym id |
void | clearHitRegions(); | – | Usuwa obszary kolizji |
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
ImageData | createImageData(sw, sh) | sw,sh – dowolne liczby rzeczywiste | Tworzy nowy (pusty) obiekt ImageData o podanej szerokości i wysokości. |
ImageData | createImageData(data) | ImageData data | Tworzy nowy (pusty) obiekt ImageData o szerokości i wysokości takiej jak w obiekcie data. |
ImageData | getImageData(x,y,w,h) | x,y,w,h – liczba rzeczywista | Zwraca obiekt ImageData zawierający dane zawarte w prostokącie o wymiarach i położeniu (x,y,w,h). |
void | putImageData(data,x,y[,dx,dy,dw,dh]) |
ImageData data |
Wstawia podany obiekt data w punkcie o współrzędnych (x,y). W przypadku podania również parametrów opcjonalnych w punkcie (x,y) wstawia wycinek danych zawarty w prostokącie (dx,dy,dw,dh) w danych ‘data’. |
Zobacz funkcje z implementowanych
interfejsów: CanvasDrawingStyles oraz CanvasPathMethods.
Interface CanvasDrawingStyle
Właściwości
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
lineWidth | Określa grubość linii | dowolna liczba rzeczywista | 1 |
lineCap | Określa kształt zakończenia linii | DOMString. Dozwolone wartości to: "butt", "round" i "square" |
"butt" |
lineJoin | Określa sposób wyświetlania złączeń linii (narożników) | DOMString. DOzwolone wartości to: "round", "bevel" i "miter". |
"miter" |
miterLimit | Określa maksymalną długość, o którą linia może być przedłużona jeśli ‘lineJoin’ jest usatwione na "miter’. Jeśli długość niezbędna do połączenia jest większa niż podana wartość – połączenie nie zostanie wykonane. |
dowolna liczba rzeczywista | 10 |
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
lineDashOffset | Określa odstęp między segmentami linii przerywanej | dowolna liczba rzeczywista |
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
font | Ustawia atrybuty czcionki | DOMString.. Składnia zgodna z zasadami CSS. | "10px sans-serif" |
textAlign | Ustawia wyrównywanie tekstu | DOMString. Dozwolone wartości: "start", "end", "left", "right", "center". |
"start" |
textBaseLine | Ustawia linię podstawową dla tekstu | DOMString. Dozwolone wartości to: "top", "hanging", "middle", "alphabetic", "ideographic", "bottom". |
"alphabetic" |
Funkcje
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | setLineDash(segments) | segments: tablica dowolnych liczb rzeczywistych. Domyślnie lista jest pusta |
Określa liczbę i wymiary odcinków tworzących linię przerywaną. Po wyczerpaniu listy segmenty powtarzają się od początku listy. |
array | getLineDash() | – | zwraca tablicę doubli, będących wymiarami ustawionymi dla linii przerywanej |
Interface CanvasPathMethods
Funkcje
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | closePath() | – | Zamyka ostatnią podścieżkę i tworzy nową, której pierwszym punktem jest ostatni punkt ścieżki zamkniętej |
void | moveTo(x,y) | x,y – dowolna liczba rzeczywista | Tworzy nową podścieżkę, z dodanym pierwszym punktem (x,y) |
void | lineTo(x,y) | x,y – dowolna liczba rzeczywista | Rysuje linię od ostatniego punktu podścieżki do punktu (x,y). |
void | quadraticCurveTo(cpx,cpy,x,y) | cpx,cpy,x,y- dowolne liczby rzeczywiste | Rysuje kwadratową krzywą Béziera od ostatniego punktu podścieżki do punktu (x,y) z punktem kontrolnym (cpx,cpy). |
void | bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y) | cpx1,cpy1,cpx2,cpy2,x,y – dowolne liczby rzeczywiste | Rysuje sześcienną krzywą Béziera od ostatniego punktu podścieżki do punktu (x,y) z uwzględnieniem punktów kontrolnych (cpx1,cpy1) oraz (cpx2, cpy2). |
void | arcTo(x1,y1,x2,y2,r) | x1,y1,x2,y2,r – dowolne liczby rzeczywiste | Rysuje łuk o promieniu r od punktu (x1,y1). Punkt (x2,y2) nie jest rysowany. Służy do wyznaczenia trzeciego punktu (x3,y3), który będzie punktem końcowym łuku. Luk jest rozpięty między punktem (x1,y1) a (x3,y3). |
void | arc(x,y,r,startAngle,endAngle,[anticlckwise]) | x,y,r,startAngle,endAngle – dowolne liczby rzeczywiste boolean anticlockwise – opcjonalny, domyślnie ‘false’. |
rysuje łuk koła o środku (x,y) i promieniu r, od kąta startAngle, do kąta endAngle w kierunku w kierunku ruchu wskazówek zegara (anticlockwise=’false’) lub w kierunku przeciwnym do ruchu wskazówek zegara (anticlockwise=’true’). |
void | rect(x,y,w,h) | x,y,w,h – dowolne liczby rzeczywiste | Tworzy nową podścieżkę i rysuje prostokąt w punkcie (x,y), szerokości w i wysokości h. |
Interface CanvasGradient
Funkcje
Typ zwracany | Nazwa | Parametry | Opis |
---|---|---|---|
void | addColorStop(offset, color) | offset – liczba rzeczywista DOMString color |
Dodaje kolor color do gradientu w położeniu względnym offset. |
Interface CanvasPattern
Interfejs pusty
Interface TextMetrics
Właściwości
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
width | Podaje szerokość tekstu | double – tylko do odczytu | – |
Interface ImageData
Właściwość | Opis | Wartość lub klasa obiektu | Wartość domyślna |
---|---|---|---|
width | szerokość danych | unsigned long – tylko do odczytu | – |
height | wysokość danych | unsigned long – tylko do odczytu | – |
data | Tabela zawierająca dane | Uint8ClampedArray | – |
Rozszerzenia
Właściwości
Funkcje
Typ zwracany | Nazwa | Parametry | Opis | Przykład |
---|---|---|---|---|
void | ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise); |
x, y, radiusX, radiusY, rotation, startAngle,endAngle – dowolne liczby rzeczywiste. Trzy ostatnie kąty podane w radianach. boolean anticlockwise |
Rysuje elipsę, o środku (x,y), promieniu radiusX w osi X, promieniu radiusY w osiY, o kącie rotacji rotation w radianach, od kąta początkowy startAngle, do kąta końcowego endAngle, w kierunku przeciwnym do ruchu zegara(anticlockwise=true) albo zgodnie z ruchem wskazówek zegara (anticlockwise=false) |
Metoda nie jest obsługiwana. |