logo

Začínáme s HTML5 Canvasem

HTML canvas je nejjednodušší způsob, jak vytvořit grafiku v Javascriptu a HTML. Můžete to vidět také napsané jako HTML5 Canvas, protože je silně spojeno s přechodem na HTML5.

HTML Canvas může být těžké se zorientovat. Pokud souhlasíte, nejste sami. V této příručce si tedy projdeme základy HTML canvas a jak jej můžete použít.

Jak používat HTML5 Canvas

Abychom mohli začít s HTML5 Canvas, musíme vytvořit <canvas> živel. Toto je pouze prázdný tag, který bude obsahovat grafiku vytvořenou naším Javascriptem. V HTML můžeme vytvořit plátno napsáním následujícího:

<canvas id="myCanvas" width="400" height="200"></canvas>

Často můžete vidět plátno s předdefinovanou šířkou a výškou, což je užitečné, pokud grafika, kterou vytváříme, musí mít určitou velikost. Můžete také nastavit šířku a výšku plátna na 100 %.

To je vše, co musíte udělat na stránce HTML. Podívejme se, jak můžeme iniciovat základní plátno, na kterém můžeme začít vytvářet grafiku.

Vytvoření HTML5 Canvas pomocí JavaScriptu

Další věc, kterou musíme udělat, abychom vytvořili naše plátno, je vybrat náš prvek plátna a aplikovat na něj kontext.

Použití kontextu na naše HTML5 Canvas pomocí getContext()
K prvkům plátna lze přidat kontext – což může být jeden z následujících:

  • 2d – 2rozměrný kontext pro vykreslování 2D grafiky.
  • webgl – 3rozměrný kontext pro vykreslování 3D objektů.
  • bitmaprenderer - pouze nám umožňuje nahradit kontext plátna něčím, co je BitImage.

Ačkoli všechny tyto jsou užitečné, pro většinu prací s plátnem používáme 2d. Začněme tedy výběrem našeho prvku plátna a použitím správného kontextu:

let myCanvas = document.getElementById('myCanvas');

// Set the context of our canvas
let context = myCanvas.getContext('2d');

Nahoře nyní máme proměnnou, kontext, kterou můžeme použít ke kreslení grafiky na naše plátno. Ačkoli jsem tuto proměnnou nazval kontext, je běžné, že ji místo toho vidíme pojmenovanou ctx.

Pamatujte na objednávku Javascript

Pokud máte potíže se zprovozněním, ujistěte se, že váš Javascript je po vašem <canvas> živel. Element HTML musí existovat, než jej můžeme vybrat!

Kreslení na našem plátně

Nyní máme svůj kontext, můžeme z něj začít čerpat. HTML canvas má řadu různých způsobů kreslení. Podívejme se na základní příklad – vytvoření obdélníku. 

let myCanvas = document.getElementById('myCanvas');

// Set the context of our canvas
let context = myCanvas.getContext('2d');

// Begin drawing something on the context
context.beginPath();
// Draw a rectangle using the rect() function
context.rect(188, 50, 200, 100);

// Fill our rectangle
context.fillStyle = '#13caa7';
context.fill();

// Add a border to our rectangle
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();

// Finish our rectangle
context.closePath();

Výstup tohoto kódu:

Jak vidíte, kresba na plátně HTML se může velmi rychle stát poměrně podrobnou. Po vytvoření kontextu rozdělíme kód po částech:

context.beginPath()
Jakýkoli nový tvar nebo kreslení na plátně začínáme pomocí beginPath(). To nám umožňuje rozdělit informace na jeden tvar a na další.

context.rect(10, 10, 100, 120)
Jedná se o standardní tvarovou funkci, jejíž argumenty jsou x, y, šířka, výška. Výše uvedený kód pak vytvoří obdélník 10 pixelů shora a 10 pixelů zleva o šířce 100 pixelů a výšce 120 pixelů.

context.fillStyle, context.fill()
První řádek, fillStyle, nastaví barvu a poté vyplní samotný tvar funkcí fill().

context.lineWidth, strokeStyle, stroke()
Ty by měly vypadat povědomě v poslední sekci – nastavíme šířku v pixelech pomocí lineWidth, poté barvu pomocí strokeWidth a tah provedeme pomocí stroke().

context.closePath()
Náš obdélník je nyní hotový - dokončíme ho pomocí closePath() funkce. Nyní, když jsme uzavřeli naši cestu, můžeme volně vytvářet další tvary, pokud chceme.

Kreslení více tvarů pomocí HTML5 Canvas

Protože používáme Javascript, můžeme programově kreslit tvary pomocí plátna. Můžeme například použít smyčku while k nakreslení mnoha obdélníků, všechny vedle sebe:

Tento kód se řídí stejnými koncepty, jako jsme použili dříve – jediný rozdíl je v tom, že používáme smyčku while() k opakovanému kreslení dalších obdélníků, dokud není plátno plné:

Použití smyčky while v HTML5 Canvas:

let myCanvas = document.getElementById('myCanvas');

// Set the context of our canvas
let context = myCanvas.getContext('2d');

// Draw a rectangle using the rect() function
let startX = 10;
let startY = 10;
let rectWidth = 100;
let rectHeight = 100;

while(startY < newCanvas.height) {
    // Begin drawing something on the context
    context.beginPath();
    // Draw our canvas
    context.rect(startX, startY, rectWidth, rectHeight);
    // Fill our rectangle
    context.fillStyle = '#13caa7';
    context.fill();

    // Add a border to our rectangle
    context.lineWidth = 5;
    context.strokeStyle = 'white';
    context.stroke();

    // Finish our rectangle
    context.closePath();

    startX += rectWidth + 10;
    console.log(startX, startY, newCanvas.width, newCanvas.height)
    if(startX > newCanvas.width - 100) {
        startX = 10;
        startY += rectHeight + 10;
    }
    if(startY > newCanvas.height - 100) {
        startX = newCanvas.width + 50;
        startY = newCanvas.height + 50;
    }
}

Závěr

V tomto úvodu jsme se podívali na to, jak lze vytvořit plátno HTML5 a jak na něj můžete kreslit základní tvary. Popsali jsme, jak můžete opakovaně kreslit na plátno prostřednictvím Javascriptu pomocí smyčky while. Když to použijete jako základ, budete moci experimentovat a zkoušet ještě více. Doufám, že se vám tento článek líbil.