Praca z obrazami i tekstem
Proszę rysować obrazy i stylizowany tekst na canvasie.
Praca z obrazami i tekstem to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 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.
Wczytywanie obrazu
Canvas rysuje na podstawie obiektu HTMLImageElement. Utwórz obiekt Image, ustaw jego src i zaczekaj na onload przed rozpoczęciem rysowania — piksele nie są dostępne wcześniej.
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";Podstawy drawImage
drawImage(img, dx, dy) rysuje obraz w podanej pozycji, zachowując jego naturalny rozmiar.
img.onload = () => {
ctx.drawImage(img, 20, 20);
};Skalowanie obrazów
Wersja z 5 argumentami — drawImage(img, dx, dy, dWidth, dHeight) — skaluje obraz do docelowego prostokąta.
ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90Kadrowanie za pomocą prostokąta źródłowego
Wersja z 9 argumentami pozwala kadrować obraz: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Pierwsze cztery argumenty opisują wycinany fragment źródłowy.
ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100Rysowanie wypełnionego tekstu
fillText(text, x, y) rysuje tekst za pomocą fillStyle. Domyślnie współrzędna y wskazuje linię bazową tekstu.
ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);Tekst z obrysem
strokeText(text, x, y) rysuje wyłącznie obrys tekstu za pomocą strokeStyle i lineWidth.
ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);Właściwość font
font używa skróconej składni CSS: [style] [weight] size family. Rozmiar i rodzina czcionki są wymagane.
ctx.font = "italic bold 28px Georgia, serif";Wyrównanie tekstu
textAlign (start/end/left/right/center) ustawia poziome zakotwiczenie, a textBaseline (top/middle/alphabetic/bottom) — pionowe zakotwiczenie względem podanego punktu.
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);Mierzenie tekstu
measureText(text) zwraca obiekt TextMetrics. Jego właściwość width określa szerokość, jaką tekst zajmie po narysowaniu — jest to niezbędne przy układaniu i zawijaniu tekstu.
const m = ctx.measureText("How wide?");
console.log(m.width); // pixelsProste zawijanie tekstu
Połącz measureText z pętlą, aby zawijać długie ciągi znaków w kolejnych wierszach.
function wrap(ctx, text, x, y, maxW, lh) {
let line = "";
for (const word of text.split(" ")) {
const test = line + word + " ";
if (ctx.measureText(test).width > maxW && line) {
ctx.fillText(line, x, y);
line = word + " ";
y += lh;
} else {
line = test;
}
}
ctx.fillText(line, x, y);
}Cienie nadające głębię
Właściwości cienia dotyczą kształtów, obrazów i tekstu: shadowColor, shadowBlur, shadowOffsetX/Y.
ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);Szybki test
Sprawdź swoją wiedzę na temat rysowania obrazów i tekstu.
Podsumowanie: obrazy i tekst
Nauczyłeś(-aś) się wczytywać obrazy i rysować je ze skalowaniem oraz kadrowaniem za pomocą drawImage, rysować tekst przy użyciu fillText/strokeText, ustawiać font, wyrównywać tekst, mierzyć jego szerokość za pomocą measureText oraz dodawać cienie. Następnie: animacja.
Często zadawane pytania
Czy lekcja „Praca z obrazami i tekstem” jest bezpłatna?
Tak — pełny tekst „Praca z obrazami i tekstem” 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 „Praca z obrazami i tekstem”?
Proszę rysować obrazy i stylizowany tekst na canvasie. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Praca z obrazami i tekstem”?
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