Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - STYCZEŃ 2019


PYTANIE NR 17.
W języku HTML5 element służący do programowalnej grafiki 2D to:
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Element <canvas> udostępnia "płótno", na którym rysuje się grafikę 2D (np. linie, kształty, sprite’y) za pomocą JavaScript i Canvas API. <svg> opisuje grafikę wektorową, a <div> i <section> służą do strukturyzacji dokumentu, nie do renderowania grafiki.

Pełne wyjaśnienie:

W HTML5 do programowalnej grafiki 2D służy element <canvas>. Sam znacznik tworzy obszar (płótno), a właściwe rysowanie odbywa się w kodzie JavaScript poprzez Canvas API (np. rysowanie linii, figur, tekstu, animacje klatka po klatce). To podejście jest typowe dla gier 2D, wizualizacji danych czy dynamicznych efektów.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • <svg> – służy do grafiki wektorowej opisanej deklaratywnie (elementy typu ścieżki, okręgi). Można ją animować CSS/JS, ale nie jest to "programowalne płótno" renderowane piksel po pikselu jak canvas.
  • <div> – to ogólny kontener blokowy do układu strony i grupowania treści. Nie zapewnia interfejsu rysowania grafiki.
  • <section> – element semantyczny do wydzielania sekcji dokumentu (np. rozdziału strony). Również nie służy do renderowania grafiki.

W praktyce wybór technologii zależy od celu: proste animacje interfejsu najczęściej robi się w CSS, grafikę wektorową (np. ikony) w SVG, a dynamiczne sceny i renderowanie programowe – w canvas (czasem także z WebGL dla 3D).

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest element <canvas> w HTML5?
<canvas> to element HTML5 tworzący obszar rysowania, na którym generuje się grafikę programowo (zwykle JavaScript). Rysowanie odbywa się przez Canvas API, np. linie, figury, tekst, a animacje realizuje się przez kolejne klatki (np. z requestAnimationFrame).
Dlaczego <svg> nie jest tym samym co <canvas>?
<svg> opisuje grafikę wektorową deklaratywnie (kształty jako elementy DOM), co ułatwia skalowanie i stylowanie. <canvas> to "płótno" pikselowe: po narysowaniu obiekt nie jest osobnym elementem DOM, a zmiany zwykle wymagają przerysowania sceny w kodzie.
Jakie zastosowania ma <canvas> w praktyce stron internetowych?
Najczęściej: gry 2D, proste silniki fizyki, efekty cząsteczkowe, wizualizacje danych, niestandardowe wykresy, edytory rysunku oraz renderowanie dynamicznych scen. Canvas sprawdza się, gdy grafika ma być tworzona i aktualizowana programowo w wielu klatkach.
Jak animować grafikę na <canvas> w JavaScript?
Typowy schemat to pętla renderowania: czyszczenie płótna, obliczenie nowego stanu obiektów i ponowne rysowanie. Do płynnych animacji używa się requestAnimationFrame, bo synchronizuje klatki z odświeżaniem ekranu i zwykle daje lepszą wydajność niż ręczne interwały.
Czy <div> może zastąpić <canvas> do rysowania?
Nie w sensie programowalnej grafiki 2D. <div> to kontener do układu i stylowania treści. Można animować jego właściwości CSS (np. transform), ale nie jest to rysowanie kształtów i scen przez API graficzne. Do rysowania używa się <canvas> albo <svg>.
Jakie błędy najczęściej popełnia się w pytaniach o <canvas> na egzaminie?
Najczęstsze pomyłki to wybór <svg> "bo też 2D" oraz wskazywanie elementów układu (<div>, <section>). Warto zapamiętać: gdy w pytaniu jest słowo programowalna grafika, chodzi o rysowanie przez API (canvas), a nie o semantykę dokumentu.
Kiedy lepiej użyć animacji CSS zamiast <canvas>?
Animacje CSS są zwykle lepsze dla interfejsu (np. przejścia, menu, przyciski, przesunięcia elementów), bo działają na elementach DOM i często korzystają z akceleracji. <canvas> wybiera się, gdy trzeba renderować własną scenę, wiele obiektów lub niestandardowe efekty.
Dlaczego Flash (.swf) nie jest dziś używany w przeglądarkach?
Flash wymagał wtyczki i był często źródłem luk bezpieczeństwa oraz problemów z wydajnością. Adobe zakończyło wsparcie Flash Player 31.12.2020, a główne przeglądarki usunęły obsługę. Obecnie stosuje się standardy HTML5: <canvas>, <video>, SVG, CSS i JavaScript.
Jakie są różnice w wydajności: <canvas> vs SVG?
SVG jest częścią DOM, więc świetnie nadaje się do prostych obiektów wektorowych, ikon i wykresów wymagających interakcji z pojedynczymi elementami. Canvas bywa szybszy przy dużej liczbie obiektów i renderowaniu klatkowym, ale wymaga przerysowania sceny i ostrożnej optymalizacji.
Jak przygotować się do zadań INF.3 z animacji i grafiki w HTML5?
Utrwal podstawy: role <canvas>, <svg>, animacje CSS (keyframes, transitions) i JavaScript (requestAnimationFrame). Ćwicz rozpoznawanie, kiedy technologia dotyczy układu strony, a kiedy grafiki. Pomaga też krótki projekt: prosty wykres w SVG i animacja na canvas.
info

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

Eksperci podkreślają: "Element &lt;canvas&gt; udostępnia "płótno", na którym rysuje się grafikę 2D (np. linie, kształty, sprite’y) za pomocą JavaScript i Canvas API."

Źródła:

  • Adobe - Flash Player End of Life (informacja o zakończeniu wsparcia 31.12.2020), https://www.adobe.com/products/flashplayer/end-of-life.html - dostęp 2026-02-24
  • MDN Web Docs - "&lt;canvas&gt;: The Graphics Canvas element", https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas - dostęp 2026-02-24
  • WHATWG HTML Living Standard - sekcja "The canvas element", https://html.spec.whatwg.org/multipage/canvas.html - dostęp 2026-02-24

Materiały:

  • Dokumentacja MDN Web Docs: Canvas API i element &lt;canvas&gt;
  • Dokumentacja MDN Web Docs: SVG (podstawy i animacje CSS)
  • Specyfikacja WHATWG HTML dotycząca elementu canvas

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego