Lekce 26 - 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 různé styly. Ty lze aplikovat na všechny tvary, od obdélníků až po kruhy. Rozlišujeme přitom dva hlavní druhy stylů:

Styl pro vyplnění – aplikuje se metodami fill() a fillRect().
Styl pro vykreslení obrysu – aplikuje se metodami stroke() a strokeRect().

V HTML si opět nejprve připravíme plátno a připojíme soubor s JavaScriptem:

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Stylování obrázků</title>
    </head>

    <body>
        <canvas width="500" height="500" id="platno"></canvas>
        <script src="script.js"></script>
    </body>
</html>

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

window.addEventListener('load', function() {
    const platno = document.getElementById("platno");
    const 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);

V prohlížeči se nám nyní zobrazí dva černé čtverce:

Stylování obrázků

localhost

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 pracují metody stroke() a fill(). Jedná se o vlastnosti strokeStyle a fillStyle. Jako hodnotu jim předáváme požadovanou barvu. Pro zápis barev můžeme použít:

Hexadecimální zápis z CSS – například #FF0000 pro červenou,
RGB – například rgb(255, 165, 0) pro oranžovou,
RGBA – rozšířený RGB zápis s alfa kanálem pro průhlednost, například rgba(255, 165, 0, 0.5) pro poloprůhlednou oranžovou (50% průhlednost),
HSL a HSLA uvedené v CSS3 - například hsl(120, 100%, 50%) pro zelenou nebo hsla(120, 100%, 50%, 0.5) pro poloprůhlednou zelenou,
pojmenované barvy - například green nebo blue.

Pojďme si připravené čtverce přebarvit:

kontext.fillStyle = "rgb(255, 165, 0)";
kontext.strokeStyle = "blue";

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

Styly musí být vždy nastaveny před samotným vykreslením, tedy před zavoláním metod jako fill() nebo stroke():

Stylování obrázků

localhost

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:

Stylování obrázků

localhost

Č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 obdélný 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 pěti č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:

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();

Výstupem bude tento obrázek:

Stylování obrázků

localhost

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í.

V následující ukázce použijeme tuto fotografii:

Vykreslení obrázku na canvas v JavaScriptu - Základní konstrukce jazyka JavaScript

Vytvořme si nový projekt. Obrázek uložíme pod názvem foto.png do složky projektu. Do HTML souboru za tag <body> doplníme element <img> ale s atributem hidden. Obrázek se tímto nezobrazí na stránce, ale bude načten do paměti, a tím pádem se bude dát vykreslit do <canvas>, které taky přidáme do stránky:

<img src="foto.png" alt="Most" id="obrazek" hidden />
<canvas width="500" height="500" id="platno"></canvas>

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

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

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

Pro vykreslení obrázku do <canvas> jsme použili metodu drawImage(), které jsme jako parametr předali vybraný obrázek a souřadnice, kam chceme obrázek vykreslit.

Výstup:

Stylování obrázků

localhost

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.

Dynamické vytvoření obrázku a plátna

Setkali jsme se tedy 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ý se díky atributu hidden vůbec nezobrazí, ale zůstane v DOMu i v paměti. 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 ale i jiný přístup, kdy jsou obrázek i plátno vytvořeny dynamicky přímo z JavaScriptu. V HTML souboru pak budeme mít vyplněnou pouze hlavičku:

<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta charset="UTF-8">
        <title>Stylování obrázků</title>
        <script src="most.js"></script>
    </head>
    <body>

    </body>
</html>

Plátno i obrázek tedy vytvoříme až v souboru most.js pomocí metody createElement():

document.addEventListener("DOMContentLoaded", function() {
    const obrazek = document.createElement("img");
    obrazek.src = "foto.png";
    obrazek.alt = "Most";
    obrazek.id = "obrazek";

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

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

Element obrázku jsme vytvořili programově a nastavili jsme mu vlastnosti src (zdroj obrázku), alt (alternativní text) a id. Poté jsme na tento obrázek navázali událost onload, ve které jsme vytvořili plátno, nastavili mu šířku, výšku a id. Nakonec jsme plátno vložili do HTML stránky pomocí metody appendChild() volané 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, jej vykreslíme metodou drawImage().

Výstup je stejný jako u předchozí ukázky:

Stylování obrázků

localhost

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:

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

Použili jsme metodu fillText(), které jsme nastavili text k vypsání a souřadnice x a y. Volitelně lze nastavit maximální velikost textu.

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

Stylování obrázků

localhost

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:

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

Hodnoty, které v této vlastnosti nastavujeme jsou totožné se zápisem v CSS u stejnojmenné vlastnosti font. Nastavili jsme velikost textu na 30 pixelů a použili font sans-serif. 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:

Stylování obrázků

localhost

V následujícím kvízu, Kvíz - Práce s čísly a canvas v JavaScriptu, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 379x (709.68 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

Článek pro vás napsal Michal Žůrek - misaz

Uživatelské hodnocení:

831 hlasů

Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.

Aktivity

Nejčastěji vyhledáváné

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

Stylování obrázků

Vlastnosti strokeStyle a fillStyle

Vlastnost lineWidth

Čtverec v cestě

Externí obrázky

Dynamické vytvoření obrázku a plátna

Vložení textu

Stáhnout

Vlastnosti `strokeStyle` a `fillStyle`

Vlastnost `lineWidth`