Interface CanvasRenderingContext2D – przegląd

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.