HTML Canvas 2D Context

Plansza interaktywna kwiecień 2017

URL:
http://www.plotkarka.eu/Pi/2dcontext/index.html
Autor:
Radosław Kowaluk

Wstęp

Metoda lub własność Opis
c.canvas element canvas

Umieszczanie elementu canvas na stronie

Stan canvas

Metoda lub własność Opis
c.save() Zapisuje bieżący stan.
c.restore() Przywraca zapamętany stan.

Stany

Style linii

Metoda lub własność Opis
c.lineWidth [ = value ] Grubość linii (liczba).
c.lineCap [ = value ] Typ zakończenia linii. Wartością może być: butt (prosty), round (okrągły), square (kwadratowy).
c.lineJoin [ = value ] Styl połączenia linii. Wartością może być: bevel (kant), round (okrągły), miter (ukośny).
c.miterLimit [ = value ] limit stylu miter (liczba)
c.setLineDash(segments) styl lini
segments=c.getLineDash() styl lini
c.lineDashOffset styl lini

Style lini

Style tekstu

Metoda lub własność Opis
c.font [ = value ] Właściwości fontu. Minimalnie rozmial i nazwa. Definiujemy jak reguła font CSS.
c.textAlign [ = value ] wyrównanie tekstu (start, end, left, right, center)
c.textBaseline [ = value ] top, hanging, middle, alphabetic, ideographic, bottom

Style tekstu

Budowanie ścieżki

Metoda lub własność Opis
c.moveTo(x, y) punkt
c.closePath() zamknięcie ścieżki
c.lineTo(x, y) linia
c.quadraticCurveTo(cpx, cpy, x, y) krzywa kwadratowa
c.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) krzywa Béziera
c.arcTo(x1, y1, x2, y2, radius) łuk
c.arc(x, y, radius, startAngle, endAngle [, counterclockwise ] ) łuk
c.rect(x, y, w, h) prostokąt

Budowanie ścieżki

Przekształcenia

Metoda lub własność Opis
c.scale(x, y) skalowanie (poziomo, pionowo)
c.rotate(angle) obrót (kąt w radianach)
c.translate(x, y) translacja, przesunięcie
c.transform(a, b, c, d, e, f) Macierz transformacji
c.setTransform(a, b, c, d, e, f) Macierz transformacji

Przekształcenia

Źródło obrazu

Źródło obrazu

Style wypełnienia i obramowania

Metoda lub własność Opis
c.fillStyle [ = value ] styl wypełnienia
c.strokeStyle [ = value ] styl linii
gradient.addColorStop(offset, color) dodaje kolor do gradientu
gradient = c.createLinearGradient(x0, y0, x1, y1) tworzy gradient liniowy
gradient = c.createRadialGradient(x0, y0, r0, x1, y1, r1) tworzy gradient radialny
pattern = c.createPattern(image, repetition) tworzy wzorzec

Style wypełnienia i obramowania

Rysowanie prostokątów

Metoda lub własność Opis
c.clearRect(x, y, w, h) przezroczysty prostokąt (*)
c.fillRect(x, y, w, h) wypełniony prostokąt (*)
c.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
c.fillText(text, x, y [, maxWidth ] ) tekst
c.strokeText(text, x, y [, maxWidth ] ) obrys tekstu
metrics = c.measureText(text) pomiar
metrics.width długość

Rysowanie tekstu

Ścieżka domyślna

Metoda lub własność Opis
c.beginPath() początek ścieżki
c.fill() wypełnienie ścieżki
c.stroke() obrys ścieżki
c.drawFocusIfNeeded(element) bd
c.clip() katrowanie
c.isPointInPath(x,y) zwraca true jeśli punkt (x,y) należy do ścieżki

ścieżka domyślna

Rysowanie obrazów

Metoda lub własność Opis
c.drawImage(image, dx, dy) rysuje obraz*
c.drawImage(image, dx, dy, dw, dh) rysuje skalowany obraz*
c.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

Regiony

Metoda lub własność Opis
c.addHitRegion(options) bd
c.removeHitRegion(id) bd
c.clearHitRegions() bd

Regiony

Manipulacja pikselami

Metoda lub własność Opis
imagedata = c.createImageData(sw, sh) tworzy obiekt ImageData
imagedata = c.createImageData(imagedata) zwraca obiekt ImageData
imagedata = c.getImageData(sx, sy, sw, sh) wycinek canvasu
imagedata.width szerokość obiektu ImageData
imagedata.height wysokość obiektu ImageData
imagedata.data tablica RGBa pikseli
c.putImageData(imagedata, dx, dy) rysuje pixele z imagedata

Manipulacja pikselami

Kompozycja

Metoda lub własność Opis
c.globalAlpha [ = value ] Przezroczystość
c.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
c.shadowColor [ = value ] kolor cienia (kolor)
c.shadowOffsetX [ = value ] przesunięcie poziome (liczba)
c.shadowOffsetY [ = value ] przesunięcie pionowe (liczba)
c.shadowBlur [ = value ] rozmycie cienia (liczba)

Cienie

Model rysowania

Animacja

Najlepsze praktyki

Animacja

Przykłady

Przykład z W3C

Przykłady

Przykład z W3C