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ściai 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.
