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
Przykład
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
Przykład
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 Przykład
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 Przykład
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 Przykład
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 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 Przykład
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 Przykład
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())
 

 

Scieżki
Typ zwracany Nazwa Parametry Opis Przykład
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 Przykład
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 Przykład
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 Przykład
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 Przykład
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
Przykład
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 Przykład
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 Przykład
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 Przykład
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.
 
lista liczb rzeczywistych getLineDash() zwraca listę wymiarów ustawionych dla linii przerywanej    

interface CanvasPathMethods

Funkcje

Scieżki
Typ zwracany Nazwa Parametry Opis Przykład
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 Przykład
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 Przykład
width Podaje szerokość tekstu double – tylko do odczytu  

Interface ImageData

ImageData
Właściwość Opis Wartość lub klasa obiektu Wartość domyślna Przykład
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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *