Wymagania
| Metoda lub własność |
Opis |
| context.canvas |
element canvas |
Stany
Stan canvas
| Metoda lub własność |
Opis |
| context.save() |
Zapisuje bieżący stan |
| context.restore() |
Przywraca zapamętany stan. |
Stany
Przekształcenia
| Metoda lub własność |
Opis |
| context.scale(x, y) |
skalowanie (poziomo, pionowo) |
| context.rotate(angle) |
obrót (kąt w radianach) |
| context.translate(x, y) |
translacja, przesunięcie |
| context.transform(a, b, c, d, e, f) |
Macierz transformacji |
| context.setTransform(a, b, c, d, e, f) |
Macierz transformacji |
Przekształcenia
Style linii
| Metoda lub własność |
Opis |
| context.lineWidth [ = value ] |
grubość linii (liczba) |
| context.lineCap [ = value ] |
typ zakończenia (butt, round, square) |
| context.lineJoin [ = value ] |
styl połączenia (bevel, round, miter) |
| context.miterLimit [ = value ] |
limit stylu miter (liczba) |
Style lini
Style tekstu
| Metoda lub własność |
Opis |
| context.font [ = value ] |
styl CSS |
| context.textAlign [ = value ] |
wyrównanie tekstu (start, end, left, right, center) |
| context.textBaseline [ = value ] |
top, hanging, middle, alphabetic, ideographic, bottom |
Style tekstu
Budowanie ścieżki
| Metoda lub własność |
Opis |
| context.moveTo(x, y) |
punkt |
| context.closePath() |
zamknięcie ścieżki |
| context.lineTo(x, y) |
linia |
| context.quadraticCurveTo(cpx, cpy, x, y) |
krzywa kwadratowa |
| context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
krzywa Béziera |
| context.arcTo(x1, y1, x2, y2, radius) |
łuk |
| context.arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) |
łuk |
| context.rect(x, y, w, h) |
prostokąt |
Budowanie ścieżki
Style wypełnienia i obramowania
| Metoda lub własność |
Opis |
| context.fillStyle [ = value ] |
styl wypełnienia |
| context.strokeStyle [ = value ] |
styl linii |
| gradient.addColorStop(offset, color) |
dodaje kolor do gradientu |
| gradient = context.createLinearGradient(x0, y0, x1, y1) |
tworzy gradient liniowy |
| gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1) |
tworzy gradient radialny |
| pattern = context.createPattern(image, repetition) |
tworzy wzorzec |
Style wypełnienia i obramowania
Ścieżka domyślna
| Metoda lub własność |
Opis |
| context.beginPath() |
początek ścieżki |
| context.fill() |
wypełnienie ścieżki |
| context.stroke() |
obrys ścieżki |
| context.drawSystemFocusRing(element) |
bd |
| shouldDraw = context.drawCustomFocusRing(element) |
bd |
| context.scrollPathIntoView() |
bd |
| context.clip() |
bd |
| context.isPointInPath(x, y) |
bd |
ścieżka domyślna
Rysowanie prostokątów
| Metoda lub własność |
Opis |
| context.clearRect(x, y, w, h) |
przezroczysty prostokąt (*) |
| context.fillRect(x, y, w, h) |
wypełniony prostokąt (*) |
| context.strokeRect(x, y, w, h) |
obramowanie prostokąta (*) |
| * x, y, w, h - liczby określające odpowiednio pozycję x, y oraz
rozmiar w,h |
Rysowanie prostokątów
Rysowanie tekstu
| Metoda lub własność |
Opis |
| context.fillText(text, x, y [, maxWidth ] ) |
tekst |
| context.strokeText(text, x, y [, maxWidth ] ) |
obrys tekstu |
| metrics = context.measureText(text) |
pomiar |
| metrics.width |
długość |
Rysowanie tekstu
Rysowanie obrazów
| Metoda lub własność |
Opis |
| context.drawImage(image, dx, dy) |
rysuje obraz* |
| context.drawImage(image, dx, dy, dw, dh) |
rysuje skalowany obraz* |
| context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) |
rysuje kadr obrazu* |
| * image (obraz); dx, dy (położenie); dw, dh (rozmiar); sx, sy, sw, sh (pozycja
kadru) |
Rysowanie obrazów
Manipulacja pikselami
| Metoda lub własność |
Opis |
| imagedata = context.createImageData(sw, sh) |
tworzy obiekt ImageData |
| imagedata = context.createImageData(imagedata) |
zwraca obiekt ImageData |
| imagedata = context.getImageData(sx, sy, sw, sh) |
wycinek canvasu |
| imagedata.width |
szerokość obiektu ImageData |
| imagedata.height |
wysokość obiektu ImageData |
| imagedata.data |
tablica RGBa pikseli |
| context.putImageData(imagedata, dx, dy) |
rysuje pixele z imagedata |
Manipulacja pikselami
Kompozycja
| Metoda lub własność |
Opis |
| context.globalAlpha [ = value ] |
Przezroczystość |
| context.globalCompositeOperation [ = value ] |
Kompozycja* |
| *
source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor, vendorName-operationName
|
Kompozycja
Cienie
| Metoda lub własność |
Opis |
| context.shadowColor [ = value ] |
kolor cienia (kolor) |
| context.shadowOffsetX [ = value ] |
przesunięcie poziome (liczba) |
| context.shadowOffsetY [ = value ] |
przesunięcie pionowe (liczba) |
| context.shadowBlur [ = value ] |
rozmycie cienia (liczba) |
Cienie
Model rysowania
Animacja
Najlepsze praktyki
Przykłady
Animacja
- [HTMLCanvas2D]
- HTML Canvas 2D Context; W3C Working Draft 29 March 2012;
URL: http://www.w3.org/TR/2dcontext/