1. Kreslení na Canvas
Úvod
Vítejte v tutoriálu o programování her v JavaScriptu. Pokud se chcete naučit programovat webové hry v JavaScriptu a umíte s JavaScriptem alespoň trochu pracovat, tak jste tu správně. Nemusíte umět v JavaScriptu nějak extra programovat, stačí naprosté základy, všechno se budu v tomto tutoriálu snažit vysvětlit tak, aby to pochopili i začátečníci.
Pokud chceme v JavaScriptu dělat hry, tak budeme většinou chtít použít Canvas. Záleží na typu hry, kterou děláme. Například v ukázkové hře Pexeso jsem canvas nepoužil.
V této první kapitole se dozvíte k čemu canvas slouží, jak ho na stránku přidat a jak na něj začít kreslit.
Co je to Canvas a jak ho na stránku přidat
Canvas je obdelníková plocha, na kterou můžeme vykreslovat grafiku pomocí JavaScriptu. Tento element můžeme na html stránku přidat pomocí html tagu s názvem canvas a jako atributy mu můžeme definovat jeho šířku a výšku. Rozměry canvasu bychom neměli nastavovat pomocí css stylů, protože by se potom canvas jen roztáhl, ale jeho pravé rozměry by se nezměnili. Potom bychom se tedy mohli divit proč se nám například vykresluje obdelník i když jsme v kódu dali příkaz k tomu, aby se vykreslil čtverec.
Následující ukázka kódu vytváří canvas o šířce 400 a výšce 200 pixelů.
<head>
<meta charset="UTF-8">
<style>
/* základní nastylování */
canvas {
border: 2px solid #f7f7f7;
background-color: #252525;
}
</style>
</head>
<body>
<!-- Následují řádek vytvoří html canvas o šířce 400 a výšce 200 pixelů. -->
<canvas width="400" height="200"></canvas>
</body>
Získání kontextu ke Canvasu a vykreslení obdelníku
Teď když víme jak canvas na html stránku přidat, můžeme na něj zkusit něco nakreslit. Než ale začneme kreslit, potřebujeme si v JavaScriptu canvas element na stránce nějak najít. Existuje více způsobů jak to provést, v následující ukázce je to řešeno tak že canvas element obsahuje atribut id a tak potom v JavaScriptu můžeme canvas získat pomocí metody getElementById.
Poté co jsme si canvas na stránce našli, musíme k němu ještě získat kontext pomocí metody getContext a až poté můžeme začít kreslit. Metoda getContext bere jako parametr hodnotu která signalizuje jak budeme chtít canvas používat. V našem případě budeme Canvas používat ke kreslení 2D grafiky a tak jako parametr předáme řetězec "2d". Další možností je například "webgl" které umožní vykreslování 3D grafiky a tak podobně. Následující ukázka vykresluje na canvas jen obdelník.
<head>
<meta charset="UTF-8">
<style>
/* základní nastylování */
canvas {
border: 2px solid #f7f7f7;
background-color: #252525;
}
</style>
</head>
<body>
<!-- Následují řádek vytvoří html canvas o šířce 400 a výšce 200 pixelů. -->
<canvas width="400" height="200" id="MujCanvas"></canvas>
<!-- V této ukázce je kód napsaný unvitř script tagů. Jinak je většinou samozřejmě lepší psát JavaScript v samostatném souboru a ten potom jen připojit pomocí atributu src. -->
<script>
// Získání Canvas elementu pomocí metody getElementById
let canvas = document.getElementById("MujCanvas");
// Získání kontextu ke Canvasu pomocí metody getContext. Jako parametr předáváme řetězec "2d", který signalizuje to, že canvas budeme chtít použít k vykreslování 2d grafiky.
let ctx = canvas.getContext("2d");
// Nyní můžeme pomocí kontextu vykreslit třeba obdelník
ctx.strokeStyle = "#00dd00"; // nastavení barvy, kterou obdelník vykreslíme
ctx.lineWidth = 4; // nastavení tloušťky čáry
ctx.strokeRect(30, 30, 150, 60); // vykreslení obdelníku
</script>
</body>
Kreslení na Canvas
Jak jste mohli vidět v předchozí ukázce, canvas kontextu můžeme nastavit různé vlastnosti jako je například barva kterou canvas bude používat k vykreslování, tloušťku čáry a tak podobně. Takže si můžeme kreslení na canvas nakonfigurovat tak, jak potřebujeme.
Ke kreslení na canvas nám canvas kontext poskytuje různé metody které můžeme použít. Jak jste viděli v předchozí ukázce, tak třeba obdelník můžeme vykreslit metodou strokeRect. Jako parametr jí předáváme souřadnice kde chceme obdelník vykreslit a jeho šířku a výšku.
Ne všechno jde ale vykreslit zavoláním jen jedné metody, někdy je potřeba třeba ještě začít cestu metodou beginPath, něco načrtnout a potom to všechno vykreslit třeba metodou stroke. V následující ukázce vidíte, že takto bychom třeba vykreslili kruh.
Kreslení na canvas není zas tak složité, jen je potřeba znát vlastnosti a metody kterými můžeme na canvas kreslit. Rozhodně není potřeba se to všechno učit nazpaměť ale umět to použít, proto jsem vytvořil canvas tahák který můžete při práci s canvasem používat.
<head>
<meta charset="UTF-8">
<style>
/* základní nastylování */
canvas {
border: 2px solid #f7f7f7;
background-color: #252525;
}
</style>
</head>
<body>
<canvas width="400" height="200" id="MujCanvas"></canvas>
<script>
let canvas = document.getElementById("MujCanvas");
let ctx = canvas.getContext("2d");
// vykreslení obdelníku (bez výplně)
ctx.strokeStyle = "#00dd00";
ctx.lineWidth = 4;
ctx.strokeRect(30, 30, 150, 60);
// vykreslení obdelníku (s výplní)
ctx.fillStyle = "red";
ctx.fillRect(120, 100, 80, 40);
// vykreslení kruhu
ctx.strokeStyle = "orange";
ctx.beginPath(); // zahájíme cestu
ctx.arc(280, 60, 30, 0, 2 * Math.PI); // kruh se nevykreslí hned jako obdelník, ale musíme k jeho vykreslení zavolat ještě metodu stroke nebo fill
ctx.stroke(); // vykreslíme kruh (vykreslíme vše co jsme si 'načrtli' od zavolání metody beginPath)
</script>
</body>
Kvíz
Zde je pro vás připravený kvíz na kterém si můžete vyzkoušet co jste si zapamatovali. Je to jen tak pro zábavu, určitě se všechno nemusíte učit nazpaměť.