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
widthiheight.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
srcitype.
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.
