Artykuł marzec 2018
W trakcie tej lekcji nauczysz się: Definiować element canvas, atrybuty szerokości i wysokości. Publikować obraz na stronie internetowej.- URL:
- http://canvas-2d.blogspot.com/2018/04/canvas.html
- Autor:
- Radosław Kowaluk
Copyright © 2018 Obowiązują zasady odpowiedzialności karnej, znaków towarowych i zasad W3C.
Wstęp
Elementcanvas
jest znacznikiem HTML5, który tworzy obraz na stronie internetowej na podstawie kodu JavaScript.
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
.Więcej
Interfejs elementucanvas
Zawartość wygenerowana skryptem. Wystąpią różnice w zależności od wersji przeglądarki. script
- Element HTML, zawierający kod skryptu lub określenie pliku z kodem. Może być definiowany z atrybutami
src
itype
.
var
- Deklaracja ECMAScript, definiująca zmienną (lub zmienne oddzielone przecinkami).
=
- Operator ECMAScript, przypisuje argumentowi z lewej strony wartość z prawej strony.
Obiekt canvas
- Obiekt
- Typ danych.
- Metoda
- Funkcja obiektu.
- Własność
- Cecha obiektu.
getContext("2d")
- Metoda elementu
canvas
.Więcej
Metody i własności canvas 2d
Zawartość wygenerowana skryptem. Wystąpią różnice w zależności od wersji przeglądarki. zmienna
- Identyfikator ECMAScript.
<canvas width =
height =
id = >
<canvas>
.
(bez spacji).
Odczyt atrybutów szerokość i wysokość elementu
Zmień wielkość elementu
Domyślnym stylem wypełnienia jest kolor czarny. Możemy zdefiniować własny styl wypełnienia za pomocą własności canvas
.Zmień wielkość elementu
canvas
.
fillStyle
. Odpowiedni kod wpisujemy przed fragmentem określającym prostokąt.
Atrybuty szerokości i wysokości mogą być definiowane lub zmieniane w skrypcie.
Zmień wartości atrybutów.
Napisany kod możemy opublikować na stronie internetowej lub blogu. W pierwszym przypadku kod umieszczamy w elemencie Zmień wartości atrybutów.
body
, w drugim 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
Pierwszy prostokąt, o wymiarach elementu
width
i height
definiujące odpowiednio szerokość i wysokość elementu canvas
.Pierwszy prostokąt, o wymiarach elementu
canvas
definiuje tło obrazu. Zmień wielkość elementu canvas
, dopasuj rozmiar tła.
Ćwiczenia
- Zapoznaj się z ćwiczeniami w aplikacji Kodujący Stwór.
Zadania
- W edytorze kodu utwórz stronę internetową zawierającą obraz canvas.