Lekcja marzec 2018
-
W trakcie tej lekcji nauczysz się: Definiować element canvas. Rysować kolorowe prostokąty. Publikować efekty swojej pracy.
- URL:
- http://canvas-2d.blogspot.com/2018/03/canvas.html
- Autor:
- Radosław Kowaluk
Copyright © 2018 Obowiązują zasady odpowiedzialności karnej, znaków towarowych i zasad W3C.
Wykład
Canvas 2d jest częścią szeroko pojętej technologii HTML5 (rekomendowany w 2015 roku). Zawartość "graficzna" elementucanvas
jest definiowana za pomocą języka JavaScript (dokładnie ECMAScript i rozszerzenia Canvas 2d).
Element canvas
i script
Domyślnie element canvas
tworzy przezroczysty obraz PNG, o wymiarach 300 x 150 (pikseli). Układ współrzędnych jest taki jak w każdej grafice.Zanalizujmy aktywnie przykłady.
Domyślny element
Przetestuj przykład zmieniając kod w lewym prostokącie.
Na początku skryptu obowiązkowo deklarujemy zmienną (canvas
.Przetestuj przykład zmieniając kod w lewym prostokącie.
W przykładzie dodano pomocnicze obramowanie elementu
canvas
za pomocą atrybutu style
i reguły CSS border
. Zawartością może być tekst alternatywny, który zostanie wyświetlony jeżeli przeglądarka nie będzie mogła zaprezentować elementu canvas
.
var nazwa_zmiennej
) i za pomocą metody getContext("2d")
przypisujemy jej wartość (operator przypisania =
). Wielkość liter ma znaczenie. Nazwy zmiennych muszą zaczynać się od litery, znaków $ i _.
W przykładzie dodano metodę
Zmień nazwę zmiennej.
Innym sposobem jest zapisanie kodu w osobnym pliku (z rozszerzeniem .js) i określenie jego adresu w atrybucie getContext("2d")
w elemencie script
.Zmień nazwę zmiennej.
Element
script
może posiadać atrybut type
z wartością "text/javascript"
, który w HTML 5 można pominąć, . Popularnym sposobem odwołania się do elementu canvas
o identyfikatorze id="c1"
jest metoda obiektu document
document.getElementById("c1")
, którą będziemy pomijać, . Poszczególne linie kodu możemy zakończyć średnikiem ;
.
src
.Podsumowując, możemy przyjąć następujące definicje.
canvas
- Element HTML, zawierający opcjonalny alternatywny tekst i tworzący obraz, którego zawartość jest zdefiniowana skryptem. Może być definiowany z atrybutami
width
iheight
. script
- Element HTML, zawierający kod skryptu lub określenie pliku z kodem. Może być definiowany z atrybutami
src
itype
.
var nazwa_zmiennej [= wartość]
- Instrukcja ECMAScript, poprzedza definiowaną zmienną (lub zmienne oddzielone przecinkami). Deklaracja może zawierać przypisanie wartości
=
- Operator ECMAScript, przypisuje argumentowi z lewej strony wartość z prawej strony.
Prostokąt, styl wypełnienia i kolor
- Obiekt
- Typ danych.
- Metoda
- Funkcja obiektu.
- Własność
- Cecha obiektu.
fillRect(x,y,a,b)
- Metoda obiektu canvas rysuje wypełniony prostokąt o współrzędnych
(x,y)
, szerokościa
i wysokościb
. Liczby mogą być ujemne. fillStyle = "kolor"
- Własność obiektu canvas definiuje styl wypełnienia barwą
kolor
, którą określamy jak w CSS np. nazwą, funkcją rgb(), liczbą szesnastkową.
fillStyle = kolor =
fillRect( x = , y = , a = , b = )
fillRect( x = , y = , a = , b = )
Figury, które nie zmieszczą się w Canvas zostaną wykadrowane. Pojęcia szerokość i wysokość pozostają w konflikcie z geometrią.
.
(bez spacji).
W przykładzie dodano prostokąt za pomocą metody
Zmień argumenty metody
Domyślnym stylem wypełnienia jest kolor czarny. Możemy zdefiniować własny za pomocą własności fillRect()
.Zmień argumenty metody
fillRect()
.
fillStyle
. Odpowiedni kod wpisujemy przed fragmentem określającym prostokąt.
W przykładzie dodano styl wypełnienia za pomocą własności
Zmień kolor korzystając z Planszy interaktywnej Kolor w CSS
Domyślny rozmiar obrazu możemy zmieć definiując atrybuty fillStyle
.Zmień kolor korzystając z Planszy interaktywnej Kolor w CSS
width
i height
(odpowiednio szerokość i wysokość elementu canvas
).
W przykładzie dodano atrybuty
Pierwszy prostokąt, o wymiarach elementu
Napisany kod możemy opublikować na stronie internetowej lub blogu. W pierwszym przypadku kod umieszczamy w elemencie width
i height
.Pierwszy prostokąt, o wymiarach elementu
canvas
definiuje tło obrazu. Zmień wielkość elementu canvas
, dopasuj rozmiar tła.
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 element
Zmień kod przykładu.
Wartości liczbowe mogą być ułamkami. Separatorem dziesiętnym jest kropka.
canvas
w kodzie strony internetowej.Zmień kod przykładu.
W przykładzie dodano styl wypełnienia za pomocą funkcji
Zmień kolory, stopień przezroczystości, wielkość kwadratów.
rgba()
, której ostatni argument oznacza stopień przezroczystości.Zmień kolory, stopień przezroczystości, wielkość kwadratów.
Ćwiczenia
- Wykonaj 5 pierwszych lekcji z kursu Kodujący Stwór (Zaczynamy, Zmienne, Kolor, Kolor i przeźroczystość, Quiz: Prostokąt, zmienne i kolory).
Zadania
- Utwórz stronę internetową zawierającą obraz canvas o dowolnym rozmiarze, zawierający tło i kompozycję kolorowych prostokątów. Użyj różnych sposobów zapisu koloru i przezroczystości.
Inspiracja
Kliknij obraz aby wygenerować ponownie (Źródło: opracowanie własne)