Rysowanie kształtów i ścieżek
Proszę renderować prostokąty, łuki i niestandardowe ścieżki.
Rysowanie kształtów i ścieżek to bezpłatna lekcja JavaScript 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Najpierw prostokąty
Prostokąty mają dedykowane skróty: fillRect, strokeRect i clearRect. Każda z tych metod przyjmuje argumenty (x, y, width, height).
ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);Rozpoczynanie ścieżki
W przypadku wszystkiego poza prostokątami należy zbudować ścieżkę. Wywołaj beginPath(), aby rozpocząć nową ścieżkę, dodaj segmenty, a następnie użyj stroke() lub fill().
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();moveTo i lineTo
moveTo(x, y) podnosi pióro i przenosi je w nowe miejsce bez rysowania. lineTo(x, y) rysuje linię prostą od bieżącego punktu do nowego.
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();Zamykanie ścieżki
closePath() rysuje linię z powrotem do punktu początkowego, zamykając obrys. Metoda ta jest przydatna przy wielokątach.
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();Wypełnianie kształtów
fill() wypełnia wnętrze bieżącej ścieżki za pomocą fillStyle. Tę samą ścieżkę możesz zarówno wypełnić, jak i obrysować.
ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();Rysowanie okręgów za pomocą arc
arc(x, y, radius, startAngle, endAngle) rysuje łuk okręgu. Kąty są podawane w radianach. Pełny okrąg rozciąga się od 0 do 2 * Math.PI.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();Łuki częściowe i wycinki koła
Użyj kąta początkowego i końcowego, aby narysować wycinek. Połącz go z lineTo prowadzącym do środka, aby utworzyć wycinek koła.
ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();Krzywe kwadratowe i Béziera
quadraticCurveTo(cpx, cpy, x, y) i bezierCurveTo(...) rysują gładkie krzywe za pomocą punktów kontrolnych.
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();Stylizowanie linii
Wygląd linii kontrolują właściwości lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) oraz setLineDash.
ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();Reguły wypełniania
Metoda fill() przyjmuje wartość "nonzero" (domyślną) lub "evenodd", aby określić sposób wypełniania nakładających się podścieżek — jest to przydatne przy kształtach z otworami.
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donutGradienty jako wypełnienia
Utwórz gradient za pomocą createLinearGradient, dodaj punkty przejścia kolorów, a następnie przypisz go do fillStyle.
const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);Szybki test
Sprawdź swoją wiedzę na temat ścieżek.
Podsumowanie: kształty i ścieżki
Potrafisz już rysować prostokąty, budować ścieżki za pomocą beginPath/moveTo/lineTo/closePath, rysować okręgi za pomocą arc, dodawać krzywe, stylizować linie oraz wypełniać je kolorami lub gradientami. Następnie: obrazy i tekst.
Często zadawane pytania
Czy lekcja „Rysowanie kształtów i ścieżek” jest bezpłatna?
Tak — pełny tekst „Rysowanie kształ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 JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Rysowanie kształtów i ścieżek”?
Proszę renderować prostokąty, łuki i niestandardowe ścieżki. Ćwiczysz JavaScript 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ąć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript 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 kształ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 JavaScript Academy?
Tak. Każda lekcja JavaScript 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
- Konfigurowanie kontekstu Canvas
- Rysowanie kształtów i ścieżek
- Praca z obrazami i tekstem
- Animacja za pomocą requestAnimationFrame