HTML5 canvas 2d. Wprowadzenie

Spis treści
  1. Znacznik canvas
    1. Czym jest znacznik canvas?
    2. Przegląd elementu HTMLCanvasElement
    3. Umieszczanie canvas na stronie
    4. Pozycja skryptu JavaScript względem canvas
    5. Pobieranie znacznika canvas w kodzie
  2. Kontekst ‘2d’
    1. Pobieranie kontekstu ‘2d’ w kodzie
    2. interface CanvasRenderingContext2D – przegląd
  3. Linie proste
    1. Rysowanie linii prostej
    2. Szerokość linii
    3. Kolor linii
    4. Zakończenia linii
    5. Złączenia linii
  4. Linia przerywana
  5. Ścieżki
    1. Rysowanie na ścieżce domyślnej
    2. Otwieranie nowej ścieżki
    3. Zamykanie ścieżki
  6. Gotowe kształty
    1. Łuk
      1. Łuk koła
      2. Łuk koła + wycinek koła
    2. Okrąg
      1. Okrąg
      2. Koło
      3. Okrąg + koło
    3. Elipsa
    4. Prostokąt
      1. Kontur
      2. Wypełnienie
      3. Kontur + wypełnienie (1)
      4. Kontur + wypełnienie (2)
    5. Czyszczenie canvas
    6. Zaokrąglanie rogów prostokąta
      1. Zaokrąglanie rogów prostokąta – funkcja arcTo
      2. Zaokrąglanie rogów prostokąta – tworzenie funkcji
  7. Transformacje
    1. Macierz przekształceń
    2. Zerowanie macierzy
    3. Translacja
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
    4. Skalowanie
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
      4. Zmniejszenie
      5. Zwiększenie
      6. Elipsa
      7. Lustro w poziomie
      8. Lustro w pionie
      9. Lustro w pionie i w poziomie
    5. Odbicie względem prostej przechodzącej przez punkt (0,0)
    6. Obrót
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
      4. Obrót iterowany
    7. Przekrzywienie
      1. Sposób 1
      2. Sposób 2
    8. Składanie przekształceń
      1. Obrót wokół dowolnego punktu
      2. Obrót w miejscu
      3. Skalowanie w miejscu
      4. Przekrzywienie w miejscu
      5. Odbicie względem prostej nie przechodzącej przez punkt (0,0)
        1. Prosta równoległa do osi Y
        2. Inna prosta
  8. Krzywe Béziera
    1. Krzywa Béziera kwadratowa
    2. Krzywa Béziera sześcienna
    3. Transformacja krzywych Béziera
  9. Kolory CSS
    1. Model RGB
    2. Model RGBA
    3. Model HSL i HSLA
    4. Model HWB
    5. Palety kolorów HTML
      1. Paleta 16 kolorów nazwanych
      2. Paleta 216 kolorów bezpiecznych dla Internetu
      3. Rozszerzona paleta kolorów nazwanych
      4. Paleta kolorów z polskimi nazwami
      5. Paleta kolorów HSL
      6. Paleta nazwanych kolorów HSL
  10. Składanie (kompozycja) kolorów
    1. Składanie kolorów – operacje
    2. Kolor wynikowy przy składaniu
  11. Obrazy
    1. Pobieranie obrazów z serwera
    2. Pobieranie obrazów ze strony
    3. Skalowanie obrazów
    4. Wymiarowanie obrazów
  12. Operacje na pikselach obrazu
    1. Macierz obrazu
    2. Pobieranie danych obrazu
    3. Iteracja po macierzy obrazu
    4. Pobranie danych wskazanego piksela
    5. Iteracja po pikselach
    6. Filtrowanie obrazów
      1. Negatyw
      2. Skala szarości
      3. Sepia
      4. Szum
      5. Kontrast
      6. Ściemnienie
      7. Rozjaśnienie
  13. Transformacje obrazów
  14. Zapamiętywanie obrazów
    1. dataURL
      1. Zapisanie canvas jako dataURL
      2. dataURL na stronie jako źródło obrazka
      3. Przesłanie dataURL na serwer i z powrotem
      4. Przesłanie dataURL na serwer i zapamiętanie w pliku *.txt
      5. Uwagi do toDataURL
    2. BLOB
      1. Zapisanie canvas jako blob (png)
      2. Zapisanie canvas jako blob (jpg)
      3. Przesłanie bloba na serwer i z powrotem
        1. w postaci pliku tekstowego
        2. w postaci pliku binarnego
      4. Uwagi do toBlob()
  15. Wypełnienia i cienie
    1. Desenie (tekstury)
      1. Deseń ‘repeat’
      2. Deseń ‘repeat-x’
      3. Deseń ‘repeat-y’
      4. Deseń ‘no-repeat’
    2. Gradienty
      1. Gradient liniowy
        1. Gradient liniowy poziomy
        2. Gradient liniowy pionowy
        3. Gradient liniowy kątowy
        4. Gradient liniowy wielokolorowy
      2. Gradient radialny
        1. gradient radialny (1)
        2. gradient radialny (2)
        3. gradient radialny (3)
        4. gradient radialny (4)
    3. Cienie
  16. Przycinanie
  17. Teksty
    1. Ustawienia czcionki
      1. Rodzina czcionek
      2. Wielkość czcionki
      3. Grubość czcionki
      4. Wariant czcionki
      5. Styl czcionki
    2. Kolor tekstu
    3. Kontur i wypełnienie tekstu
    4. Deseń tekstu
    5. Gradient tekstu
    6. Metryka tekstu
    7. Wyrównywanie tekstu
    8. Linia tekstu
    9. Zawijanie tekstu
    10. Transformacje tekstu
    11. Encje
  18. Skrypty JavaScript do książki
  19. Uwagi końcowe
  20. Dane pierwotnej wersji
Spis treści cz. 2

HTML5 canvas (2)