26. diel - Štylovanie obrázkov a vloženie textu na plátno v JavaScripte

V minulej lekcii, Obrázky a kreslenie na canvas v JavaScripte, sme sa venovali obrázkom a naučili sa kresliť jednoduché tvary na plátno.

V dnešnom tutoriále základov JavaScriptu budeme pokračovať v práci s grafikou. Naučíme sa našim kresbám nastaviť rôzne farby alebo zmeniť šírku obrysu a ukážeme si, ako na plátno vložiť externý obrázok a ako v ňom vypísať text.

Štylovanie obrázkov

Aby naše kresby dobre vyzerali, naučíme sa používať štýly. Rozlišujeme štýly na vyplnenie metódami fill() a fillRect() či vykreslenie obrysu metódami stroke() a strokeRect(). Štýly je možné aplikovať na všetky objekty od obdĺžnikov po kruhy.

V HTML si opäť najskôr pripravíme plátno:

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

V JavaScripte počkáme na načítanie celej stránky, potom získame element plátna a nastavíme mu kontext:

let canvas;
let context;

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

    // Here we will write the code of individual examples

});

Namiesto komentára doplníme do predchádzajúceho kódu dva riadky na vykreslenie štvorcov:

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

Pri ďalších príkladoch už nebudeme uvádzať kód na získanie kontextu plátna a nastavenie poslucháča čakajúceho na načítanie celej stránky.

Vlastnosti strokeStyle a fillStyle

Pre nastavenie farby máme k dispozícii dve základné vlastnosti, s ktorými ďalej pracujú metódy stroke() a fill(). Jedná sa o vlastnosť strokeStyle a fillStyle. Ako hodnotu im odovzdávame požadovanú farbu. Farbu môžeme nastaviť pomocou klasického hexadecimálneho zápisu z CSS, napríklad #FFA500 pre oranžovú. Je však možné použiť aj RGB zápis rgb(255, 165, 0) alebo rgba(255, 165, 0, 0.5).

Posledná hodnota formátu RGBA je tzv. alfa kanál určujúci priehľadnosť. Uvedeným zápisom sme priehľadnosť nastavili na 50 %.

Farbu je možné definovať ďalej vo formáte HSL a HSLA, ktorý sa používa v CSS3. A poslednou možnosťou je uviesť názov farby, napríklad green.

Poďme si pripravené štvorce prefarbiť. Štýly musia byť uvedené vždy pred samotným vykreslením, teda pred zavolaním metódy fill(), stroke() a podobne:

// We added the following two lines
context.fillStyle = "rgb(255, 165, 0)";
context.strokeStyle = "blue";

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

Výsledok:

Vlastnosť lineWidth

Aby bol náš modrý štvorec lepšie vidieť, ukážeme si ako zväčšiť šírku jeho obrysu. Do kódu vyššie pridáme k nastavovaným farbám tento riadok:

context.lineWidth = 3;

Použili sme tu vlasnosť lineWitdh volanú na kontexte plátna a nastavili sme tak šírku čiary na tri pixely.

V prehliadači uvidíme modrý štvorec so širším obrysom:

Štvorec v ceste

Obdĺžnik alebo štvorec môžeme tiež vložiť do cesty. Hoci by sa to na prvý pohľad mohlo zdať zbytočné, keď máme metódy fillRect() a strokeRect(), tak je to veľmi výhodné, keď s ich pomocou kreslíme zložitejšie tvary. Mohol by to byť obdĺžny domček s trojuholníkom ako strechou, mriežka vytvorená opakovaným kreslením štvorcov a podobne. My si nakreslíme krížik zložený z piatich štvorcov.

Všetky štvorce vložíme do cesty, to nám umožní pracovať s výsledným obrázkom ako s jedným objektom. Celý kód môžeme zapísať takto:

context.beginPath();

// left column
context.rect(10, 45, 30, 30);

// center column
context.rect(45, 10, 30, 30);
context.rect(45, 45, 30, 30);
context.rect(45, 80, 30, 30);

// right column
context.rect(80, 45, 30, 30);

context.closePath();
context.stroke();

Pretože máme všetky štvorce v jednej ceste, poďme ich vyfarbiť. Ukážku doplníme iba o dva riadky a vyfarbíme všetky štvorce naraz:

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

Než si ukážeme výstup uvedeného kódu, poďme ho ešte vylepšiť. Veľkosť štvorca, medzery a počiatočný posun uložíme do premenných. Vytvoríme funkciu, ktorá bude kresliť rovnako veľké štvorce. Bude prijímať parametre row a column, v ktorých uvedieme jednoduché súradnice pre daný štvorec. Hodnota 0 bude znamenať prvý riadok alebo prvý stĺpec, hodnota 1 potom druhý riadok alebo stĺpec a tak ďalej. Súradnice x a y z nich potom vypočítame v našej funkcii. Prostredný stĺpec potom vykreslíme pomocou cyklu:

let squareSize = 30;
let space = 5;
let shift = 10;

context.beginPath();

function drawSquare(radek, sloupec) {
    let axisX = shift + column * (squareSize + space);
    let axisY = shift + row * (squareSize + space);
    context.rect(axisX, axisY, squareSize, squareSize);
}

// left column
drawSquare(1, 0);

// center column
for (let i = 0; i < 3; i++) {
    drawSquare(i, 1);
}

// right column
drawSquare(1, 2);

context.closePath();
context.stroke();

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

Výstupom oboch uvedených riešení bude tento obrázok:

Externé obrázky

Na plátno samozrejme môžeme vkladať aj iné obrázky uložené v súbore. Predtým však musí byť načítané, inak sa nevykreslí.

Na vykreslenie obrázku použijeme metódou drawImage(), ktoré ako parameter odovzdáme vybraný obrázok. Ďalšie parametre sú voliteľné, na druhom a treťom mieste zadávame pomocou súradníc, kam chceme obrázok vykresliť.

Metóda drawImage() prijíma až deväť parametrov, obrázok potom vie zväčšiť, zmenšiť alebo orezať. Podrobnosti uvádza oficiálna dokumentácia nazvaná MDN web docs.

Doplňme do HTML súboru odkaz na tento obrázok obrázok a ako id zadajme image:

Tento obrázok potom vložíme plátno nasledovne:

let canvas, context, image;

window.addEventListener('load', function() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    image = document.getElementById("image");
    image.parentElement.removeChild(image); // Remove an image from a document

    context.drawImage(image, 0, 0);
)};

Výsledok:

V prvom zápise sa stretávame s riešením, v ktorom sú obrázok a plátno definované staticky priamo v HTML kóde. Tento spôsob je vhodný, keď máme už v štruktúre stránky vopred pripravené elementy. Obrázok je v tomto prípade načítaný z existujúceho <img> elementu, ktorý je po načítaní stránky pomocou JavaScriptu odstránený z DOM. Vykreslenie na plátno sa potom deje v momente, keď je okno prehliadača plne načítané, čo sa spracováva v udalosti load.

Existuje aj iný prístup, kedy sú obrázok aj plátno vytvorené dynamicky priamo z JavaScriptu:

document.addEventListener("DOMContentLoaded", function() {
    let image = document.createElement("img");
    image.src = "imgage.jpg";
    image.alt = "Bridge";
    image.id = "image";

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

        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);
    };
});

Element obrázku sme takto vytvorili programovo a nastavili mu vlastnosť src, kde uvádzame zdroj obrázku, alternatívny text (alt) a id. Potom sme v udalosti onload nastavenej na novom obrázku vytvorili plátno, nastavili mu šírku, výšku a id. Do HTML stránky sme plátno potom vložili metódou appendChild() volanou na document.body. Obrázok je tak najskôr načítaný a až potom, čo je dostupný a plátno máme pripravené vrátane jeho kontextu, vykreslíme ho metódou drawImage().

Vloženie textu

Ukážme si na záver, ako na plátno vypísať text. Budeme chcieť napríklad pridať watermark k obrázku v našej galérii alebo popisky ku grafom.

Použijeme metódu fillText() a nastavíme jej text na vypísanie a súradnice x, y. Voliteľne je možné uviesť maximálnu veľkosť textu.

Jednoduchý text vykreslíme napríklad takto:

context.fillText("Holiday in Greece", 50, 50);

Prezrime si výsledok v prehliadači:

Vidíme, že náš text je bez štýlov a navyše je celkom malý. Preto máme k dispozícii ďalšiu vlastnosť font, ktorú musíme podobne ako vlastnosť fillStyle nastaviť ešte pred vykreslením textu. Hodnoty, ktoré v tejto vlastnosti nastavujeme sú totožné so zápisom v CSS pri rovnomennej vlastnosti font. Nastavme veľkosť textu na 30 pixelov a použime font sans-serif:

context.font = "30px sans-serif";
context.fillText("Holiday in Greece", 50, 50);

Aby sme náš nápis ešte zvýraznili, zmeníme aj farbu písma a doplníme pred posledný riadok:

context.fillStyle = "darkblue";

Výsledok:

V budúcej lekcii, 2D kontext plátna v JavaScripte, si ukážeme použitie transformácií kontextu, prechody, výplne a tieň.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.