Twoja przeglądarka nie wspiera Canvas!

Kolorowe linie

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

Wykład

).

Ramki

.
Zanalizujmy aktywnie przykłady.
W przykładzie dodano ramkę metodą strokeRect().

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 strokeStyle. Odpowiedni kod wpisujemy przed fragmentem określającym figurę.
W przykładzie dodano kolor ramki własnośącią 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ści a i wysokości b. 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 = )
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: beginPath(), moveTo(), lineTo(), stroke().

Zmień argumenty metody fillRect().
Jeśli chcemy otrzymać łamaną dodajemy kolejne odcinki metodą lineTo().
W przykładzie dodano styl za pomocą własności strokeStyle.

Zmień kod przykładu. Zamknij ścieżkę.
Napisany kod możemy opublikować na stronie internetowej lub blogu. W pierwszym przypadku kod umieszczamy w elemencie 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 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.
Math.floor() = 1
Liczby określające kolor w funkcjach rgb() i rgba() muszą być całkowite (od 0 do 255). Jeśli chcemy zastosować kolor losowy musimy otrzymana liczbę losową zaokrąglić.
W przykładzie dodano styl wypełnienia za pomocą funkcji rgb().

Zmień kod.
W przykładzie dodano styl wypełnienia za pomocą funkcji rgb().

Zmień kod.

Ćwiczenia

  1. 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

  1. 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.

Inspiracja

Maksymalna ilość linii: Kolor tła:

Szukaj

Kurs

Wstęp
Kolorowe prostokąty
Wyrażenia
Instrukcje
Kolorowe linie
Funkcje
Obiekty
Transformacje
Fraktale
Animacje
Interakcje
Indeks