Rozpoczynanie pracy z canvas w JavaScript
Canvas to specjalny obszar do rysowania
w przeglądarce za pomocą JavaScript. Ten obszar tworzy się
za pomocą znacznika <canvas>, któremu
należy podać szerokość i wysokość:
<canvas width="200" height="200"></canvas>
Do pracy z tym obszarem w JavaScript na początek uzyskajmy referencję do tego znacznika do jakiejś zmiennej:
let canvas = document.querySelector('canvas');
Następnie do tej zmiennej należy zastosować
metodę getContext:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
Można uprościć:
let ctx = document.querySelector('canvas').getContext('2d');
W wyniku do zmiennej ctx zapisze się
obiekt zawierający w sobie tak zwany
kontekst wykonania. Wszystkie rysowanie
będzie odbywać się za pomocą metod tego
obiektu. Ich poznawaniem zajmiemy się w kolejnych
lekcjach.
