Lekce 25 - Stylování obrázků a vložení textu na plátno v JavaScriptu

V minulé lekci, Obrázky a kreslení na canvas v JavaScriptu, jsme se věnovali obrázkům a naučili se kreslit jednoduché tvary na plátno.

V dnešním tutoriálu základů JavaScriptu budeme pokračovat v práci s grafikou. Naučíme se našim kresbám nastavit různé barvy nebo změnit šířku obrysu a ukážeme si, jak na plátno vložit externí obrázek a jak v něm vypsat text.

Stylování obrázků

Aby naše kresby dobře vypadaly, naučíme se používat styly. Rozlišujeme styly pro vyplnění metodami fill() a fillRect() či vykreslení obrysu metodami stroke() a strokeRect(). Styly lze aplikovat na všechny objekty od obdélníků po kruhy.

V HTML si opět nejprve připravíme plátno:

<canvas width="500" height="500" id="platno"></canvas>

V JavaScriptu počkáme na načtení celé stránky, poté získáme element plátna a nastavíme mu kontext:

let platno;
let kontext;

window.addEventListener('load', function() {
    platno = document.getElementById("platno");
    kontext = platno.getContext("2d");

    // Sem budeme psát kód jednotlivých příkladů

});

Místo komentáře doplníme do předchozího kódu dva řádky pro vykreslení čtverců:

kontext.fillRect(50, 50, 100, 100);
kontext.strokeRect(200, 50, 100, 100);

U dalších příkladů už nebudeme uvádět kód pro získání kontextu plátna a nastavení posluchače čekajícího na načtení celé stránky.

Vlastnosti strokeStyle a fillStyle

Pro nastavení barvy máme k dispozici dvě základní vlastnosti, se kterými dále pracují metody stroke() a fill(). Jedná se o vlastnost strokeStyle a fillStyle. Jako hodnotu jim předáváme požadovanou barvu. Barvu můžeme nastavit pomocí klasického hexadecimálního zápisu z CSS, například #FFA500 pro oranžovou. Je však možné použít také RGB zápis rgb(255, 165, 0) nebo rgba(255, 165, 0, 0.5).

Poslední hodnota formátu RGBA je tzv. alfa kanál určující průhlednost. Uvedeným zápisem jsme průhlednost nastavili na 50 %.

Barvu lze definovat dále ve formátu HSL a HSLA, který se používá v CSS3. A poslední možností je uvést název barvy, například green.

Pojďme si připravené čtverce přebarvit. Styly musí být uvedeny vždy před samotným vykreslením, tedy pře zavoláním metody fill(), stroke() a podobně:

// Následující dva řádky jsme doplnili
kontext.fillStyle = "rgb(255, 165, 0)";
kontext.strokeStyle = "blue";

kontext.fillRect(50, 50, 100, 100);
kontext.strokeRect(200, 50, 100, 100);

Výsledek:

Vlastnost lineWidth

Aby byl náš modrý čtverec lépe vidět, ukážeme si jak zvětšit šířku jeho obrysu. Do kódu výše přidáme k nastavovaným barvám tento řádek:

kontext.lineWidth = 3;

Použili jsme zde vlasnost lineWitdh volanou na kontextu plátna a nastavili jsme tak šířku čáry na tři pixely.

V prohlížeči uvidíme modrý čtverec s širším obrysem:

Čtverec v cestě

Obdélník nebo čtverec můžeme také vložit do cesty. Ačkoliv by se to na první pohled mohlo zdát zbytečné, když máme metody fillRect() a strokeRect(), tak je to velmi výhodné, když s jejich pomocí kreslíme složitější tvary. Mohl by to být obdelný domeček s trojúhelníkem jako střechou, mřížka vytvořená opakovaným kreslením čtverců a podobně. My si nakreslíme křížek složený z šesti čtverců.

Všechny čtverce vložíme do cesty, to nám umožní pracovat s výsledným obrázkem jako s jedním objektem. Celý kód můžeme zapsat takto:

kontext.beginPath();

// Levý sloupec
kontext.rect(10, 45, 30, 30);

// Střední sloupec
kontext.rect(45, 10, 30, 30);
kontext.rect(45, 45, 30, 30);
kontext.rect(45, 80, 30, 30);

// Pravý sloupec
kontext.rect(80, 45, 30, 30);

kontext.closePath();
kontext.stroke();

Protože máme všechny čtverce v jedné cestě, pojďme je vybarvit. Ukázku doplníme o pouhé dva řádky a vybarvíme všechny čtverce najednou:

kontext.fillStyle = "red";
kontext.fill();

Než si ukážeme výstup uvedeného kódu, pojďme jej ještě vylepšit. Velikost čtverce, mezery a počáteční posun uložíme do proměnných. Vytvoříme funkci, která bude kreslit stejně velké čtverce. Bude přijímat parametry radek a sloupec, v nichž uvedeme jednoduché souřadnice pro daný čtverec. Hodnota 0 bude znamenat první řádek nebo první sloupec, hodnota 1 pak druhý řádek nebo sloupec a tak dále. Souřadnice x a y z nich poté vypočítáme v naší funkci. Prostřední sloupec pak vykreslíme pomocí cyklu:

let velikostCtverce = 30;
let mezera = 5;
let posun = 10;

kontext.beginPath();

function vykresliCtverec(radek, sloupec) {
    let osaX = posun + sloupec * (velikostCtverce + mezera);
    let osaY = posun + radek * (velikostCtverce + mezera);
    kontext.rect(osaX, osaY, velikostCtverce, velikostCtverce);
    }

// Levý sloupec
vykresliCtverec(1, 0);

// Střední sloupec
for (let i = 0; i < 3; i++) {
    vykresliCtverec(i, 1);
    }

// Pravý sloupec
vykresliCtverec(1, 2);

kontext.closePath();
kontext.stroke();

kontext.fillStyle = "red";
kontext.fill();

Výstupem obou uvedených řešení bude tento obrázek:

Externí obrázky

Na plátno samozřejmě můžeme vkládat i jiné obrázky uložené v souboru. Předtím však musí být načtené, jinak se nevykreslí. Pro vykreslení obrázku použijeme metodou drawImage(), které jako parametr předáme vybraný obrázek. Další parametry jsou volitelné, na druhém a třetím místě zadáváme pomocí souřadnic, kam chceme obrázek vykreslit.

Metoda drawImage() přijímá až devět parametrů, obrázek pak umí zvětšit, zmenšit nebo oříznout. Podrobnosti uvádí oficiální dokumentace nazvaná MDN web docs.

Doplňme do HTML souboru odkaz na tento obrázek obrázek a jako id zadejme obrazek:

Tento obrázek pak vložíme plátno následovně:

let platno, kontext, obrazek;

window.addEventListener('load', function() {
    platno = document.getElementById("platno");
    kontext = platno.getContext("2d");
    obrazek = document.getElementById("obrazek");
    obrazek.parentElement.removeChild(obrazek); // Odstranění obrázku z dokumentu

    kontext.drawImage(obrazek, 0, 0);
)};

Výsledek:

V prvním zápisu se setkáváme s řešením, v němž jsou obrázek a plátno definovány staticky přímo v HTML kódu. Tento způsob je vhodný, když máme již ve struktuře stránky předem připravené elementy. Obrázek je v tomto případě načítán z existujícího <img> elementu, který je po načtení stránky pomocí JavaScriptu odstraněn z DOM. Vykreslení na plátno se pak děje v momentě, kdy je okno prohlížeče plně načtené, což se zpracovává v události load.

Existuje i jiný přístup, kdy jsou obrázek i plátno vytvořeny dynamicky přímo z JavaScriptu:

document.addEventListener("DOMContentLoaded", function() {
    let obrazek = document.createElement("img");
    obrazek.src = "https://www.itnetwork.cz/images/3588/jstut/imgs/img6.png";
    obrazek.alt = "Most";
    obrazek.id = "obrazek";

    obrazek.onload = function () {
        let platno = document.createElement("canvas");
        platno.width = 500;
        platno.height = 500;
        platno.id = "platno";
        document.body.appendChild(platno);

        let kontext = platno.getContext("2d");
        kontext.drawImage(obrazek, 0, 0);
    };
});

Element obrázku jsme takto vytvořili programově a nastavili mu vlastnost src, kde uvádíme zdroj obrázku, alternativní text (alt) a id. Poté jsme v události onload nastavené na novém obrázku vytvořili plátno, nastavili mu šířku, výšku a id. Do HTML stránky jsme plátno pak vložili metodou appendChild() volanou na document.body. Obrázek je tak nejprve načten a až poté, co je dostupný a plátno máme připravené včetně jeho kontextu, vykreslíme jej metodou drawImage().

Vložení textu

Ukažme si na závěr, jak na plátno vypsat text. Budeme chtít například přidat watermark k obrázku v naší galerii nebo popisky ke grafům. Použijeme metodu fillText() a nastavíme jí text k vypsání a souřadnice x, y. Volitelně lze uvést maximální velikost textu.

Jednoduchý text vykreslíme například takto:

kontext.fillText("ITnetwork.cz", 50, 50);

Prohlédněme si výsledek v prohlížeči:

Vidíme, že náš text je bez stylů a navíc je celkem malý. Proto máme k dispozici další vlastnost font, kterou musíme podobně jako vlastnost fillStyle nastavit ještě před vykreslením textu. Hodnoty, které v této vlastnosti nastavujeme jsou totožné se zápisem v CSS u stejnojmenné vlastnosti font. Nastavme velikost textu na 30 pixelů a použijme font sans-serif:

kontext.font = "30px sans-serif";
kontext.fillText("ITnetwork.cz", 50, 50);

Abychom náš nápis ještě zvýraznili, změníme také barvu písma a doplníme před poslední řádek:

kontext.fillStyle = "darkblue";

Výsledek:

V příští lekci, 2D kontext plátna v JavaScriptu, si ukážeme použití transformací kontextu, přechody, výplně a stín.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.