Rysowanie prostokątów i ścieżek
Rysowanie kształtów za pomocą fillRect, strokeRect i poleceń ścieżek
Rysowanie prostokątów i ścieżek to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 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.
Konfiguracja elementu Canvas
Element <canvas> wymaga jawnego określenia atrybutów width i height, które definiują jego wymiary w pikselach. Pobierz kontekst 2D: const ctx = canvas.getContext("2d"). Wszystkie operacje rysowania korzystają z tego obiektu kontekstu.
<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");fillRect i strokeRect
Rysuj prostokąty bez definiowania ścieżek: ctx.fillRect(x, y, width, height) wypełnia prostokąt jednolitym kolorem. ctx.strokeRect(x, y, width, height) rysuje jego obrys. Przed rysowaniem ustaw ctx.fillStyle i ctx.strokeStyle.
ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);clearRect do wymazywania
ctx.clearRect(x, y, width, height) usuwa piksele, przywracając im przezroczystość. Używaj tej metody do wymazywania obszarów przed ponownym rysowaniem — jest to niezbędne w animacji: wyczyść canvas, a następnie w każdej klatce narysuj wszystko ponownie w nowych pozycjach.
Podstawy ścieżek
Ścieżki definiują kształty. Rozpocznij: ctx.beginPath(). Przenieś punkt do początku: ctx.moveTo(x, y). Rysuj linie: ctx.lineTo(x, y). Zamknij ścieżkę: ctx.closePath(). Narysuj ją: ctx.fill() lub ctx.stroke().
Rysowanie linii
Trójkąt: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). closePath automatycznie rysuje końcowy odcinek z powrotem do punktu początkowego — nie trzeba ponownie podawać pierwszych współrzędnych.
Łuk i okrąg
ctx.arc(cx, cy, radius, startAngle, endAngle). Pełny okrąg: ctx.arc(100, 100, 50, 0, Math.PI * 2). Kąty są wyrażane w radianach. Wartość 0 oznacza kierunek w prawo (pozycja godziny 3), a Math.PI — w lewo (pozycja godziny 9).
Krzywe Béziera
ctx.quadraticCurveTo(cpx, cpy, x, y) rysuje kwadratową krzywą Béziera z jednym punktem kontrolnym. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) rysuje sześcienną krzywą Béziera z dwoma punktami kontrolnymi, umożliwiając tworzenie gładkich krzywych.
Style wypełnienia
fillStyle przyjmuje ciągi określające kolory, gradienty liniowe (ctx.createLinearGradient()), gradienty radialne (ctx.createRadialGradient()) oraz wzory (ctx.createPattern(image, repeat)). Stosuj złożone wypełnienia zamiast samych jednolitych kolorów, aby uzyskać bogate efekty wizualne.
Style linii
Kontroluj wygląd linii za pomocą: ctx.lineWidth (szerokość w pikselach), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") oraz ctx.setLineDash([5, 3]), które tworzy linie przerywane z naprzemiennymi długościami odcinków.
Zapisywanie i przywracanie stanu
ctx.save() odkłada bieżący stan (fillStyle, strokeStyle, lineWidth, transform, clip) na stos. ctx.restore() zdejmuje go ze stosu. Otaczaj złożone operacje rysowania wywołaniami save/restore, aby uniknąć przenikania stylów między niezwiązanymi ze sobą operacjami rysowania.
Układ współrzędnych
Początek układu canvas (0,0) znajduje się w lewym górnym rogu. Wartość X rośnie w prawo, a Y — w dół. Przekształcenia (translate, rotate, scale) zmieniają układ współrzędnych, umożliwiając rysowanie względem lokalnego początku bez ręcznego obliczania pozycji absolutnych.
Sprawdzenie wiedzy
Co robi ctx.beginPath() przed narysowaniem ścieżki?
Podsumowanie
Rysowanie 2D na canvasie korzysta z metod kontekstu do tworzenia prostokątów (fillRect, strokeRect), ścieżek (beginPath, moveTo, lineTo, arc, bezierCurveTo), stylów (fillStyle, strokeStyle, lineWidth) oraz zarządzania stanem (save/restore). Opanowanie tych podstawowych elementów pozwala budować złożoną grafikę z prostych klocków.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Rysowanie prostokątów i ścieżek” jest bezpłatna?
Tak — pełny tekst „Rysowanie prostokątów i ścieżek” 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 „Rysowanie prostokątów i ścieżek”?
Rysowanie kształtów za pomocą fillRect, strokeRect i poleceń ścieżek Ć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 2 z 4.
Ile czasu zajmuje lekcja „Rysowanie prostokątów i ścieżek”?
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
- Konfiguracja canvas i kontekstu 2D
- Rysowanie prostokątów i ścieżek
- Tekst i obrazy na canvas
- Animacje za pomocą requestAnimationFrame