0Pricing
HTML Academy · Lekcja

Konfiguracja canvas i kontekstu 2D

Tworzenie elementu canvas i uzyskiwanie kontekstu renderowania 2D

Konfiguracja canvas i kontekstu 2D to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Element canvas

Element <canvas> to dostępny w przeglądarce obszar bitmapowy do rysowania:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Atrybuty szerokości i wysokości

Zawsze ustawiaj wymiary canvas za pomocą atrybutów HTML, a nie CSS:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

Pobieranie kontekstu 2D

Pobierz kontekst renderowania 2D, aby rysować:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Układ współrzędnych

Układ współrzędnych canvas rozpoczyna się w lewym górnym rogu:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

Stan canvas

Canvas ma stan rysowania, który można zapisywać i przywracać:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Czyszczenie canvas

Wyczyść cały canvas przed ponownym rysowaniem (na potrzeby animacji):

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle i strokeStyle

Ustaw kolory dla operacji wypełniania i obrysowywania:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth i inne właściwości stylu

Właściwości obrysu i stylu linii:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Responsywny canvas HiDPI

Usuń rozmycie canvas na ekranach Retina/HiDPI:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

Canvas a SVG

Kiedy wybrać canvas, a kiedy SVG:

  • Canvas — bitmapowy, piksel po pikselu, świetny do gier, dużych wizualizacji danych i przetwarzania obrazów
  • SVG — wektorowy, skalowalny, świetny do logo, ikon, wykresów z elementami interaktywnymi i zapewniania dostępności

Dostępność canvas

Canvas nie ma wbudowanej obsługi dostępności — należy dodać ją ręcznie:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Szybkie sprawdzenie

Jaki jest prawidłowy sposób pobrania kontekstu rysowania canvas?

Podsumowanie: konfiguracja canvas

Najważniejsze informacje o konfiguracji canvas:

  • Ustawiaj szerokość i wysokość za pomocą atrybutów HTML, a nie CSS
  • canvas.getContext('2d') — pobierz kontekst rysowania
  • Początek układu znajduje się w lewym górnym rogu (0,0); x→w prawo, y→w dół
  • ctx.save() / ctx.restore() — zarządzanie stanem oparte na stosie
  • Skaluj przez devicePixelRatio, aby uzyskać ostry obraz na ekranach Retina

Często zadawane pytania

Czy lekcja „Konfiguracja canvas i kontekstu 2D” jest bezpłatna?

Tak — pełny tekst „Konfiguracja canvas i kontekstu 2D” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja canvas i kontekstu 2D”?

Tworzenie elementu canvas i uzyskiwanie kontekstu renderowania 2D Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja canvas i kontekstu 2D”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja canvas i kontekstu 2D
  2. Rysowanie prostokątów i ścieżek
  3. Tekst i obrazy na canvas
  4. Animacje za pomocą requestAnimationFrame
← Powrót do HTML Academy