Zielony Smok - logo witryny

Interface CanvasRenderingContext2D – przegląd

Standard: Standard

CanvasRenderingContext2D implements CanvasDrawingStyles

CanvasRenderingContext2D implements CanvasPathMethods

Zwrotna referencja do canvas:
readonly attribute HTMLCanvasElement canvas;

Właściwości

Stan kontekstu
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"

 

Style i kolory
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  

 

Cienie
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

Stan kontekstu
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

 

Style i kolory
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’.

 

Transformacje
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ę

 

Prostokąty
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())

 

Ścieżki
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.

 

Teksty
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
x,y, maxWidth – dowolne liczby
rzeczywiste
maxWidth jest elementem opcjonalnym

Konturuje podany tekst i wyświetla go w miejscu o podanych
współrzędnych.
TextMetrics measureText(text) DOMString text Wykonuje pomiar podanego tekstu.

 

Rysowanie obrazów
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).

 

Obszary kolizji
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

 

Operacje na pikselach obrazu
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
x,y,dx,dy,dw,dh – liczby rzeczywiste
dx,dy,dw,dh – są opcjonalne

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

Linie: złączenia i zakończenia
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

 

Linie przerywane
Właściwość Opis Wartość lub klasa obiektu Wartość domyślna
lineDashOffset Określa odstęp między segmentami linii przerywanej dowolna liczba rzeczywista  

 

Tekst
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

Linie przerywane
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

Ścieżki
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

Linie przerywane
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

Metryka tekstu
Właściwość Opis Wartość lub klasa obiektu Wartość domyślna
width Podaje szerokość tekstu double – tylko do odczytu

Interface ImageData

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

ellipse()
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.