HTML5 Canvas ‘2d’ (1)

Materiały zawarte na stronie zostały – w stosunku do pierwotnej wersji w ebooku – uaktualnione.

  1. Znacznik <canvas>
    1. Co to jest canvas?
    2. Przegląd elementu HTMLCanvasElement
    3. Umieszczanie canvas na stronie
    4. Znacznik HTML5 <script>
    5. Pozycja skryptu JavaScript względem canvas (1)
    6. Pozycja skryptu JavaScript względem canvas (2)
    7. Pobieranie znacznika canvas w kodzie
  2. Kontekst ‘2d’
    1. Pobieranie kontekstu “2d” w kodzie
    2. Interface CanvasRenderingContext2D – przegląd
  3. Wymiary canvas a wymiary powierzchni rysunkowej
  4. Linie proste
    1. Rysowanie linii prostej
    2. Szerokość linii
    3. Kolor linii
    4. Zakończenia linii
    5. Złączenia linii
  5. Linia przerywana
  6. Ścieżki
    1. Rysowanie na ścieżce domyślnej
    2. Otwieranie nowej ścieżki
    3. Zamykanie ścieżki
  7. Gotowe kształty
    1. Łuk koła + wycinek koła (1)
    2. Łuk koła + wycinek koła (2)
    3. Okrąg
      1. Okrąg
      2. Koło
      3. Koło + okrąg
    4. Elipsa
    5. Prostokąt
      1. Kontur
      2. Wypełnienie
      3. Kontur + wypełnienie (1)
      4. Kontur + wypełnienie (2)
      5. Czyszczenie canvas
        1. Zaokrąglanie rogów prostokąta
        2. Ilustracja metody arcTo
        3. Zaokrąglanie rogów prostokąta – tworzenie funkcji
  8. Transformacje
    1. Macierz przekształceń
    2. Translacja
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
    3. 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 poziomie i pionie
    4. Odbicie względem prostej przechodzącej przez punkt (0,0)
    5. Obrót
      1. Sposób 1
      2. Sposób 2
      3. Sposób 3
      4. Obrót iterowany
    6. Przekrzywienie
      1. Sposób 1
      2. Sposób 2
    7. 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
  9. Krzywe Béziera
    1. Krzywa Béziera kwadratowa
    2. Krzywa Béziera sześcienna
    3. Transformacja krzywych Béziera
  10. 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 nazwanych kolorów HSL
      6. Paleta kolorów HSL
  11. Składanie (kompozycja) kolorów
    1. Kompozycja kolorów w przeglądarkach
    2. Kompozycja kolorów na canvas
    3. Kolor wynikowy przy składaniu kolorów
  12. Obrazy
    1. Pobieranie obrazów z serwera
    2. Pobieranie obrazów ze strony
    3. Skalowanie obrazów
    4. Wymiarowanie obrazów
  13. Operacje na pikselach obrazu
    1. Macierz obrazu
    2. Pobieranie danych obrazu
    3. Iteracja po danych obrazu
    4. Pobranie danych wskazanego piksela
    5. Iteracja po pikselach
    6. Filtrowanie obrazów (negatyw, skala szarości, sepia, szum, kontrast, ściemnienie, rozjaśnienie)
  14. Transformacje obrazów
  15. Zapamiętywanie obrazów
    1. dataURL
      1. Zapisanie canvas jako dataURL
      2. dataURL na stronie jako źródło obrazka
      3. Uwagi do toDataURL
    2. BLOB
      1. Zapisanie canvas jako blob (png)
      2. Zapisanie canvas jako blob (jpg)
      3. Uwagi do toBlob()
  16. 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 pod kątem 45°
        4. Gradient liniowy wielokolorowy
      2. Gradient radialny (kołowy)
        1. Gradient kołowy (1)
        2. Gradient kołowy (2)
        3. Gradient kołowy (3)
        4. Gradient kołowy (4)
    3. Cienie
  17. Maskowanie (przycinanie)
  18. Teksty
    1. Ustawienia czcionki
      1. Styl czcionki
      2. Wariant czcionki
      3. Grubość czcionki
      4. Wielkość czcionki
      5. Rodzina czcionek
    2. Kolor tekstu
    3. Kontur i wypełnienie tekstu
    4. Deseń tekstu
    5. Tekst z gradientem
    6. Wyrównywanie tekstu
    7. Metryka tekstu
    8. Linia tekstu
    9. Zawijanie tekstu
    10. Transformacje tekstów
    11. Encje
  19. Winding rule
  20. Właściwości i funkcje rzadko używane lub eksperymentalne
    1. direction
    2. imageSmoothing
    3. isPointInPath
    4. isPointInStroke
  21. Uwagi końcowe
  22. Proste narzędzie do testowania kodu
  23. O książce

HTML5 Canvas ‘2d’ (2)

  1. Rysowanie krzywych parametrycznych
    1. Asteroida (1)
    2. Asteroida (2)
    3. Rozeta czterolistna
    4. Rozety Grandiego
    5. Spirala Archimedesa
    6. Kardioida
    7. Krzywe Lissajous
    8. Epicykloida
    9. Hipocykloida
    10. Elipsa
  2. Tworzenie innych figur
    1. Strzałka (Arrow)
    2. Jin-Jang (Yin Yang)
    3. Szachownica (Chessboard)
    4. Spirala kwadratowa (Square spiral)
    5. Kwadraty wpisane w kwadrat (Squares inscribed in a square)
    6. Spirala (logarytmiczna) Pascala (Pascal’s logarithmic spiral)
    7. Złota spirala (Golden spiral)
    8. Kwadraty i spirala Fibonacciego
  3. Biblioteka niektórych figur
    1. Klasa Figure
    2. Klasa Point
      1. Rysowanie punktu
      2. Odległość między punktami
      3. Klonowanie głębokie punktu
      4. Rysowanie wielu punktów
    3. Klasa Segment
      1. Rysowanie odcinka
    4. Klasa Triangle
      1. Rysowanie trójkąta
    5. Klasa Rectangle
      1. Rysowanie prostokąta
    6. Klasa IrregPolygon
      1. Rysowanie wielokąta nieregularnego
      2. Rysowanie wielokąta nieregularnego (2)
      3. Obliczanie punktu ciężkości wielokąta nieregularnego
    7. Klasa RegPolygon
      1. Rysowanie wielokąta regularnego
    8. Klasa StarPolygon
      1. Rysowanie wielokąta gwiaździstego
      2. Rysowanie pentagramu
    9. Klasa Star
      1. Rysowanie gwiazdy
    10. Klasa Oval
      1. Rysowanie figur wypełnionych
      2. Rysowanie konturów figur
      3. Rysowanie figur wypełnionych z konturem
  4. Automaty komórkowe
    1. Automat 1d nr 90
    2. Automaty 1d – program
    3. Gra ‘Life’ Conwaya
      1. glider
      2. glider gun
    4. Mrówka Langtona
      1. Mrówka ‘zwykła’
      2. Mrówka ‘z przeszkodami’
    5. Ruch drogowy Nagela – Schreckenberga
  5. Rysowanie fraktali
    1. Algorytmy standardowe
      1. Zbiór Cantora
      2. Krzywa Kocha
      3. Smok Heighwaya
      4. Supersmok
      5. Trójkąt Sierpińskiego
      6. Trójkąt Sierpińskiego metodą losową
      7. Paproć Barnsleya
      8. Fraktal Mandelbrota
      9. Fraktal Julii
      10. Fraktal ‘płonący statek’
      11. Atraktor Lorenza
    2. L-System (grafika żółwia)
      1. Zbiór Cantora
      2. Krzywa Kocha
      3. Płatek Kocha
      4. Trójkąt Sierpińskiego
      5. Gałązka
      6. Krzywa Hilberta
      7. Smok Levy’ego
      8. Modyfikacja krzywej Kocha
      9. Pentadendryt
      10. Gałązka 2
      11. Kółeczka
    3. Istota chaosu
      1. Równanie Malthusa
      2. Analogowe równanie logistyczne (1)
      3. Analogowe równanie logistyczne (2)
      4. Drzewo Feigenbauma
      5. Fraktale Lapunowa (1)
      6. Fraktale Lapunowa (2)
      7. Fraktale Lapunowa (3)
      8. Fraktale Lapunowa (4)
  6. Kalendarze i zegary
    1. Zegar analogowy
    2. Zegar cyfrowy
    3. Zegar binarny
    4. Zegar odliczający czas od zdarzenia
    5. Kalendarz miesięczny
  7. Obsługa dźwięku
    1. Link do pliku audio
    2. Element ‘audio’ w HTML 5
  8. Obsługa filmów
    1. Element video w HTML5
    2. Wideo na canvas
      1. Wyświetlenie wideo
      2. Dodanie kontrolek
      3. Pobieranie klatek
  9. Animacje HTML
    1. Animowany gif
  10. Animacje JavaScript
    1. Ruch obrazka w poziomie (setTimeout())
    2. Animacja poklatkowa: ‘Paląca się świeca'(setTimeout())
  11. Animacje canvas
    1. requestAnimFrame()
      1. Ruch figury w poziomie
      2. Oscylacja pozioma
    2. setTimeout()
      1. Ruch figury w poziomie
      2. Sygnalizator drogowy
      3. Ruch chaotyczny: rój owadów ganiających za kursorem myszy
    3. setInterval()
      1. Ruch figury w poziomie
      2. Ruch po okręgu: koniunkcje dolne Wenus (Gwiazda Izydy(Ishtar))
      3. Ruch obrotowy: rotacja symbolu Jin-Jang (Yin Yang)
      4. Animowane sito Eratostenesa
  12. Współpraca z myszą
    1. na canvas
    2. obrazy na canvas
    3. kształty na canvas
  13. JSON
    1. Przekształcenie obiektu JavaScript w łańcuch znaków JSON

HTML5 Canvas ‘2d’ (3)

  1. Filtry splotowe 3 x 3
    1. Splot i jądro splotu
    2. Iteracja po pikselach
    3. Rozmycie
    4. Wyostrzenie
    5. Wykrywanie krawędzi
    6. Płaskorzeźba
    7. Rozmycie Gaussa
    8. Szum Perlina
  2. Współpraca z serwerem Tomcat
    1. dataURL
      1. Przesłanie dataURL na serwer i z powrotem
      2. Przesłanie dataURL na serwer i zapamiętanie w pliku *.txt
    2. JSON
      1. Przekazanie obiektu JSON na serwer i z powrotem
    3. Kalendarze i zegary
      1. Kalendarz Majów
  3. Aplikacje HTML5
    1. ICing
    2. Tarot
    3. Kalendarz Majów

JavaFX

Java

Baza danych Apache Derby

Blog Zielonego Smoka

Religia (Biblia)