Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2021 (test 2)


PYTANIE NR 30.
Znacznik języka HTML, który służy do dynamicznego tworzenia grafiki na stronie internetowej bez osadzania dodatkowych plików, to
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Element <canvas> udostępnia na stronie "płótno", na którym skrypty (najczęściej JavaScript) mogą rysować i animować grafikę w czasie działania strony. Znaczniki <img>, <object> i <embed> służą głównie do wstawiania gotowych zasobów/obiektów, a nie do programowego rysowania.

Pełne wyjaśnienie:

Poprawną odpowiedzią jest <canvas>, ponieważ ten element HTML definiuje obszar (tzw. płótno), na którym można programowo tworzyć grafikę w przeglądarce. Najczęściej odbywa się to przez JavaScript i odpowiednie API (np. kontekst 2D), które pozwala rysować kształty, tekst, obrazy, a także wykonywać animacje.

Dlaczego pozostałe opcje nie pasują do opisu "dynamicznego tworzenia grafiki":

  • <img> służy do wyświetlania obrazu jako zasobu wskazanego adresem (np. PNG/JPG/SVG). To wstawienie gotowego pliku, a nie rysowanie generowane w trakcie działania strony.
  • <object> jest elementem do osadzania zewnętrznych zasobów/obiektów (np. dokumentów lub innych treści). Może wyświetlać zawartość, ale nie jest standardowym mechanizmem rysowania sceny "piksel po pikselu" przez skrypt.
  • <embed> również służy do osadzania zewnętrznej treści (multimedia/wtyczki/zasoby), a nie do bezpośredniego, skryptowego generowania grafiki w obrębie DOM tak jak robi to <canvas>.

Na egzaminie warto zapamiętać prostą regułę: jeśli pytanie mówi o rysowaniu, animacji lub renderowaniu przez kod w przeglądarce, najczęściej chodzi o <canvas> (lub o SVG, ale to zwykle jest osobno nazwane). Jeśli mowa o wstawieniu gotowego pliku graficznego, właściwym tropem jest <img>.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest element <canvas> w HTML?
To element HTML tworzący na stronie obszar "płótna", na którym można rysować grafikę za pomocą skryptu (najczęściej JavaScript). Sam znacznik nie rysuje automatycznie — dopiero kod korzystający z API Canvas generuje kształty, tekst lub animacje.
Jak działa rysowanie na <canvas> w JavaScript?
Najpierw pobiera się referencję do elementu i jego kontekst (np. 2D), a potem wywołuje metody rysujące (linie, prostokąty, łuki, tekst). Każde odświeżenie sceny to zwykle czyszczenie płótna i narysowanie klatek od nowa, co ułatwia animacje.
Dlaczego <img> nie służy do dynamicznego tworzenia grafiki?
<img> wyświetla gotowy obraz wskazany w atrybucie src (plik lub URL). Nie daje natywnego zestawu poleceń do rysowania kształtów czy animacji. Dynamiczność w <img> to co najwyżej podmiana źródła obrazu, a nie programowe rysowanie.
Co jest różnicą między <canvas> a SVG?
<canvas> to renderowanie pikselowe (rysunek jest "spłaszczony" do bitmapy), dobre do animacji i gier. SVG opisuje obiekty wektorowe jako elementy, które można stylować i edytować w DOM. Na egzaminie często <canvas> = rysowanie skryptowe, SVG = grafika wektorowa w znacznikach.
Kiedy używa się <object> zamiast <canvas>?
<object> stosuje się do osadzania zewnętrznych zasobów, np. dokumentów lub innych typów treści, które przeglądarka potrafi wyświetlić. Nie jest to typowe narzędzie do rysowania sceny przez JavaScript. Jeśli celem jest generowanie grafiki "w locie", wybiera się <canvas>.
Czy <embed> to to samo co <object> w HTML?
Oba elementy służą do osadzania treści zewnętrznej, ale różnią się możliwościami i typowym użyciem. W kontekście egzaminu najważniejsze jest to, że ani <embed>, ani <object> nie są podstawowym mechanizmem programowego rysowania grafiki tak jak <canvas>.
Jakie typowe zastosowania ma <canvas> w aplikacjach webowych?
Najczęściej spotkasz go w wykresach, wizualizacjach danych, prostych grach 2D, animacjach, edytorach rysunku oraz w obróbce obrazu po stronie klienta (np. filtry, kadrowanie). To praktyczny wybór, gdy grafika ma powstawać dynamicznie podczas działania strony.
Jakie atrybuty <canvas> są najważniejsze na egzaminie?
Najczęściej pojawiają się width i height, bo określają rozmiar płótna w pikselach. Warto pamiętać, że stylowanie CSS zmienia rozmiar wyświetlania, ale nie rozdzielczość rysowania. To częsty powód "rozmytej" grafiki na <canvas>.
Dlaczego grafika z <canvas> może wyglądać gorzej po skalowaniu CSS?
Bo <canvas> ma własną rozdzielczość bufora rysowania zależną od atrybutów width/height. Gdy powiększysz element tylko CSS, przeglądarka rozciągnie bitmapę, co powoduje utratę ostrości. Rozwiązaniem jest dopasowanie atrybutów do docelowego rozmiaru (często z uwzględnieniem DPI).
Jak rozpoznać w teście, że chodzi o <canvas> a nie o <img>?
Szukaj słów: dynamicznie, rysowanie, animacja, renderowanie, JavaScript. To wskazuje na <canvas>. Gdy pytanie mówi o "wstawieniu obrazu" lub o pliku graficznym (PNG/JPG/SVG), właściwym tropem jest <img>.
info

Statystycznie 59% uczniów zna prawidłową odpowiedź. średnie

Specjaliści zwracają uwagę: "Element &lt;canvas&gt; udostępnia na stronie "płótno", na którym skrypty (najczęściej JavaScript) mogą rysować i animować grafikę w czasie działania strony."

Źródła:

  • MDN Web Docs: "<canvas>: The Graphics Canvas element" (dokumentacja elementu canvas) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas - accessed 2026-03-04
  • WHATWG HTML Living Standard: sekcja dotycząca elementu "The canvas element" https://html.spec.whatwg.org/multipage/canvas.html - accessed 2026-03-04
  • W3C Recommendation: "HTML 5.2" (opis elementu canvas) https://www.w3.org/TR/html52/semantics-embedded-content.html#the-canvas-element - accessed 2026-03-04

Materiały:

  • Dokumentacja MDN: Canvas API (wprowadzenie i przykłady)
  • Specyfikacja HTML (sekcja o elemencie canvas)
  • Ćwiczenia praktyczne: rysowanie kształtów i animacja w &lt;canvas&gt; z JavaScript
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego