Lekcja kwiecień 2018
-
W trakcie tej lekcji nauczysz się: Rysować kolorowe ramki i odcinki (łamane). Zaokrąglać liczby. Publikować efekty swojej pracy.
- URL:
- http://canvas-2d.blogspot.com/2018/04/kolorowe-linie.html
- Autor:
- Radosław Kowaluk
Copyright © 2018 Obowiązują zasady odpowiedzialności karnej, znaków towarowych i zasad W3C.
Wykład
).Ramki
.Zanalizujmy aktywnie przykłady.
W przykładzie dodano ramkę metodą
Przetestuj przykład zmieniając kod w lewym prostokącie.
Domyślnym stylem jest kolor czarny. Możemy zdefiniować własny styl za pomocą własności strokeRect()
.Przetestuj przykład zmieniając kod w lewym prostokącie.
strokeStyle
. Odpowiedni kod wpisujemy przed fragmentem określającym figurę.
W przykładzie dodano kolor ramki własnośącią
Zmień kolor korzystając z Planszy interaktywnej Kolor w CSS
.strokeStyle
.Zmień kolor korzystając z Planszy interaktywnej Kolor w CSS
strokeRect(x,y,a,b)
- Metoda obiektu canvas rysuje ramkę o współrzędnych
(x,y)
, szerokościa
i wysokościb
. Liczby mogą być ujemne. strokeStyle = "kolor"
- Własność obiektu canvas definiuje styl linii barwą
kolor
, którą określamy jak w CSS np. nazwą, funkcją rgb(), liczbą szesnastkową.
strokeStyle = kolor =
strokeRect( x = , y = , a = , b = )
strokeRect( x = , y = , a = , b = )
Figury, które nie zmieszczą się w Canvas zostaną wykadrowane. Pojęcia szerokość i wysokość pozostają w konflikcie z geometrią.
Odcinek i łamana
.beginPath()
- Metoda obiektu canvas, .
moveTo(x, y)
- Metoda obiektu canvas, .
lineTo(x, y)
- Metoda obiektu canvas, .
stroke()
- Metoda obiektu canvas, .
W przykładzie dodano odcinek za pomocą metod:
Zmień argumenty metody
Jeśli chcemy otrzymać łamaną dodajemy kolejne odcinki metodą beginPath()
, moveTo()
, lineTo()
, stroke()
.Zmień argumenty metody
fillRect()
.
lineTo()
.
W przykładzie dodano styl za pomocą własności
Zmień kod przykładu. Zamknij ścieżkę.
Napisany kod możemy opublikować na stronie internetowej lub blogu. W pierwszym przypadku kod umieszczamy w elemencie strokeStyle
.Zmień kod przykładu. Zamknij ścieżkę.
body
w odpowiednim miejscu strony. W przypadku bloga korzystamy z edytora i trybu HTML.Innym sposobem publikacji jest skopiowanie grafiki i stawienie pliku w formacie PNG. Niestety jesteśmy wtedy ograniczeni do grafiki statycznej.
W przykładzie dodano atrybuty
Zmień kod przykładu.
width
i height
definiujące odpowiednio szerokość i wysokość elementu canvas
.Zmień kod przykładu.
Metoda Math.floor()
Math.floor(x)
- Metoda ECMAScript obiektu Math, zwraca liczbę całkowitą, mniejszą lub równą podanemu argumentowi x.
W przykładzie dodano styl wypełnienia za pomocą funkcji
Zmień kod.
rgb()
.Zmień kod.
W przykładzie dodano styl wypełnienia za pomocą funkcji
Zmień kod.
rgb()
.Zmień kod.
Ćwiczenia
- Wykonaj lekcje 16-20 z kursu Kodujący Stwór (Linie, Linie i pętle, Kodowanie jest proste, Unikaj powtarzania kodu, Quiz: Pętle For).
Zadania
- Utwórz stronę internetową zawierającą obraz canvas o dowolnym rozmiarze, zawierający tło i kompozycję losowych linii i/lub ramek. Użyj różnych sposobów zapisu koloru i przezroczystości.