Konfigurowanie kontekstu Canvas
Proszę pobrać i skonfigurować kontekst renderowania 2D.
Konfigurowanie kontekstu Canvas to bezpłatna lekcja JavaScript 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.
Czym jest Canvas API?
Canvas API pozwala rysować grafikę 2D za pomocą JavaScriptu na elemencie <canvas>. Otrzymujesz obszar rysowania złożony z pikseli oraz zestaw poleceń do rysowania kształtów, obrazów i tekstu.
- Znacznik składa się z pojedynczego tagu
<canvas>. - Całe rysowanie odbywa się w JavaScript za pośrednictwem obiektu context.
<canvas id="board" width="320" height="200"></canvas>Pobieranie kontekstu
Wywołaj getContext('2d') na elemencie canvas, aby uzyskać obiekt CanvasRenderingContext2D. Każde polecenie rysowania przechodzi przez ten obiekt.
const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2DUkład współrzędnych
Początek układu (0, 0) znajduje się w lewym górnym rogu. Współrzędna X rośnie w prawo, a Y w dół. Canvas o wymiarach 320x200 ma prawy dolny róg w punkcie (320, 200).
Atrybuty width i height
Atrybuty HTML width i height określają rozmiar bufora rysowania w pikselach. Jeśli ich nie podasz, domyślne wymiary wynoszą 300x150. Ustawienie ich w JS również czyści canvas.
const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300Rozmiar CSS a rozmiar bufora
Właściwości CSS width/height rozciągają canvas na ekranie, ale NIE zmieniają bufora pikseli. Jeśli różnią się od wartości atrybutów, rysunki wyglądają na rozmyte lub rozciągnięte. Aby uzyskać ostry obraz, zachowaj zgodność obu rozmiarów.
canvas.width = 400; // buffer pixels
canvas.style.width = "400px"; // display size — match itObsługa ekranów o wysokiej gęstości pikseli
Na ekranach Retina wartość devicePixelRatio często wynosi 2. Zwiększ rozmiar bufora i pomniejsz kontekst, aby linie pozostały ostre.
const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);Ustawianie stylów wypełnienia i obrysu
Stan rysowania jest przechowywany w kontekście. fillStyle ustawia kolor wypełnienia, a strokeStyle — kolor obrysu. Obie właściwości przyjmują dowolny ciąg znaków określający kolor CSS.
ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;Pierwszy rysunek
Gdy kontekst jest gotowy, możesz od razu rozpocząć rysowanie. fillRect(x, y, w, h) rysuje wypełniony prostokąt przy użyciu bieżącej wartości fillStyle.
const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);Czyszczenie canvas
clearRect(x, y, w, h) usuwa prostokątny obszar, przywracając mu przezroczystość. Wyczyszczenie całego bufora to zwykle pierwszy krok każdej klatki animacji.
ctx.clearRect(0, 0, canvas.width, canvas.height);Zapisywanie i przywracanie stanu
save() umieszcza bieżący styl i transformację na stosie, a restore() zdejmuje je ze stosu i przywraca. Pozwala to odizolować tymczasowe zmiany.
ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous valueWykrywanie obsługiwanych funkcji
Aby obsłużyć bardzo stare przeglądarki, przed użyciem sprawdź, czy istnieje getContext.
const canvas = document.getElementById("board");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
// safe to draw
} else {
console.log("Canvas not supported");
}Szybki test
Sprawdź swoją wiedzę na temat konfigurowania canvas.
Podsumowanie: konfiguracja canvas
Nauczyłeś(-aś) się: pobierać canvas, wywoływać getContext('2d'), rozumieć początek układu współrzędnych w lewym górnym rogu, ustawiać rozmiar bufora i rozmiar CSS, obsługiwać ekrany o wysokiej gęstości pikseli za pomocą devicePixelRatio oraz konfigurować fillStyle/strokeStyle. Następnie: rysowanie kształtów i ścieżek.
Często zadawane pytania
Czy lekcja „Konfigurowanie kontekstu Canvas” jest bezpłatna?
Tak — pełny tekst „Konfigurowanie kontekstu Canvas” 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 „Konfigurowanie kontekstu Canvas”?
Proszę pobrać i skonfigurować kontekst renderowania 2D. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Konfigurowanie kontekstu Canvas”?
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