Tutoriál HTML5: Nakreslite si logo pomocou kódu HTML5

tutorial-HTML5-nakreslite-si-logo-pomocou-kodu-HTML5

HTML5 obsahuje element canvas, ktorý umožňuje vývojárom vytvárať obrázky a animácie v prehliadači pomocou JavaScriptu. Element canvas môžeme využívať k vytvoreniu jednoduchých a zložitých tvarov, ale aj k vytvoreniu grafov a diagramov. K tomu nie je potrebná žiadna knižnica ani zásuvný modul. Prehliadače, ktoré podporujú element canvas a samotné kreslenie sú: Ch4, FF3, IE9, S3.2, O10.1.
Kreslenie štvorca
Element cavas je obalový element (kontajner), podobne ako element script. Vo vnútri tohto elementu môžeme kresliť. V podstate ide o simulovanie prázdneho listu papiera. Plátno canvas definujeme šírkou a výškou (width, height). Pri určovaný rozmerov plátna nie je možné použiť CSS, lebo by sme narušili obsah. Preto je potrebné ohľadom rozmerov plátna sa rozhodnúť už pri samotnej deklarácii dokumentu.
K umiestňovaniu elementov na plátno používame JavaScript.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<!-- definovanie priestoru - plátna pre kreslenie -->
<canvas id="kresliace_platno" width="250" height="250">
    tu sa vykreslia tri štvorčeky, ktorých parametre sme zadali pomocou JavaScript
</canvas>
     <script type="text/javascript" charset="utf-8">
       var platno = document.getElementById('kresliace_platno'); // definovanie plátna
       if (platno.getContext){ // ak dôjde k spojeniu s plátnom
         var kontext = platno.getContext('2d');
         
            kontext.fillStyle = "#C80000"; // farba štvorca
            kontext.fillRect (10, 10, 100, 100); // poloha ľavého rohu,veľkosť strán
            
	    kontext.fillStyle = "#00C800";
            kontext.fillRect (20, 20, 100, 100);
            
            kontext.fillStyle = "#0000C8";
            kontext.fillRect (30, 30, 100, 100);
       
       }else{ // ak sa plátno nenajde
		    /*sem mali byť nakreslené štvorčeky, ale nie je to
			  podporované 
			*/
       }
     </script>
</body>
</html>

Výsledok:



Nakreslili sme tri štvorce. Každý jeden je automaticky umiestnený v samotnej vrstve. Týmto spôsobom je možné kresliť aj niekoľko objektov na jednom plátne. AK vy sme chceli štvorce vo vrstvách vymeniť, jednoducho vymeníme poradie v zdrojovom kóde.
Kreslenie loga
Logo, ktoré si nakreslíme sa bude skladať s textu, šikmej linky, štvorca a trojuholníku.
Začneme vytvorením elementu canvas - nášho plátna na kreslenie a vytvoríme aj funkciu JavaScript na kreslenie loga.
Pridanie textu na plátno sa skladá s výberu fontu, jeho veľkosti a zarovnania, následne zarovnanie textu na správnu polohu v mriežke plátna. Takže text vložíme aj so všetkými potrebnými nastaveniami takto:
kontext.font = 'italic 40px sans-serif';
kontext.textBaseline = 'top';
kontext.fillText('webtutorials.sk', 60, 0);

Čiary kreslíme na plátno spájaním bodov. Najprv sa určí počiatočný bod v mriežke plátna a potom určíme ďalšie body. Takýmto spôsobom sa posúvame až vytvoríme čiaru. Metódou beginPath() použijeme k začiatku kreslenia cesty (čiary) a potom vytvárame ďalšiu cestu(čiaru) takto:

kontext.lineWidth = 2;
kontext.beginPath();
kontext.moveTo(0, 40);
kontext.lineTo(30, 0);
kontext.lineTo(60, 40 );
kontext.lineTo(285, 40 );
kontext.stroke();
kontext.closePath();

Posunutie počiatku : potrebujeme vykresliť malý štvorček a vo vnútri trojuholník do väčšieho trojuholníka. Ak sa na plátne kreslia tvary, určujeme ich počiatok súradnicami x,y, čo je poloha horného ľavého rohu. Tento počiatok môžeme aj posunúť. Vykreslíme menší štvorec s posunutím jeho počiatku takto:

kontext.save();
kontext.translate(20,20);
kontext.fillRect(0,0,20,20);

Štvorec sme začali kresliť použitím metódy save(). Táto metóda ukladá predošlý stav plátna. Takže sa vieme do tohto stavu kedykoľvek vrátiť. Ide aj o novú vrstvu.
Nasleduje cesta, pomocou ktorej vykreslíme trojuholník, miesto kreslenia ťahom použijeme výplň k vytvoreniu ilúzie, že trojuholník bol vyrezaný:

kontext.fillStyle = '#fff';
kontext.strokeStyle = '#fff';
kontext.lineWidth = 2;
kontext.beginPath();
kontext.moveTo(0, 20);
kontext.lineTo(10, 0);
kontext.lineTo(20, 20 );
kontext.lineTo(0, 20 );
kontext.fill();
kontext.closePath();
kontext.restore();

Celý skript vyzerá takto:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
    <script type="text/javascript" 
            charset="utf-8" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
</head>
<body>

<!-- definovanie priestoru - plátna pre kreslenie -->
<canvas id="logo" width="900" height="80">
	<h1>Webtutorials.sk</h1>
</canvas>

      <script>
      var kresliLogo = function(){
        var platno = document.getElementById('logo');
        var kontext = platno.getContext('2d');
        
          kontext.fillStyle = "#f00";
          kontext.strokeStyle = "#f00";    
        
        kontext.font = 'italic 40px sans-serif';
        kontext.textBaseline = 'top';
        kontext.fillText('webtutorials.sk', 60, 0);
      
         kontext.lineWidth = 2;
         kontext.beginPath(); // začiatok kreslenia 
         kontext.moveTo(0, 40); 
         kontext.lineTo(30, 0);
         kontext.lineTo(60, 40);
         kontext.lineTo(285, 40);
         kontext.stroke(); // vykreslenie čiary
         kontext.closePath(); // ukončenie kreslenia
              
         kontext.save(); // uloženie predošlého stavu plátna
         kontext.translate(20,20); // posunutie
         kontext.fillRect(0,0,20,20);  // parametre štvorca
                  
         kontext.fillStyle    = '#fff';
         kontext.strokeStyle = '#fff';
         
         kontext.lineWidth = 2;
         kontext.beginPath();
         kontext.moveTo(0, 20); 
         kontext.lineTo(10, 0);
         kontext.lineTo(20, 20 );
         kontext.lineTo(0, 20 );
         kontext.fill();
         kontext.closePath();
         kontext.restore();
     };
     
     $(function(){
       var platno = document.getElementById('logo');
       if (platno.getContext){
         kresliLogo();
       }
     });
    </script>

Výsledok:


Rubriky: