PC-politika.cz - Novinky: HTML5: Grafické plátno [2]

V tomto díle je uvedena ukázka vložení textu do grafického plátna v HTML 5. Jak už bylo řečeno v minulém , prvním díle, tag/element canvas, je plátno pro dynamické vykreslování obrázků, grafiky, animace, her, grafů apod. Jde vlastně o kontejner, takže k nakreslení grafiky musíme použít skript. Jak tedy vkládáme text a jak ho formátujeme?

K základním informacím patří to, že tag/element/prvek/značka <canvas> je ve skutečnosti neviditelný kontejner/blok, lépe řečeno prostor. Standardně má nastavení 300 × 150 pixelů, a to ve všech typech prohlížečů. Takto vypadá základní definice canvas:

<canvas id="c"></canvas>

Takto tedy vapadá prázdné plátno! Pro kreslení na toto plátno musíme použít context pomocí JavaScriptu. Teprve po zadání content lze kreslit ohavnosti obsah grafiky. V dnešní ukázce to bude nakreslení/vložení textu:

Canvas - kompletní kód na vložení textu

//vlozeni-textu.html 
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>Canvas - vlozeni textu text</title> 
    <script type="text/javascript"><!--
window.addEventListener('load', function () {
  // Zde nadefinujeme tag/element canvas
  var elem = document.getElementById('myCanvas');
  if (!elem || !elem.getContext) {
    return;
  }
 
  // Zde nadefinujeme 2D obsah pro canvas
  var context = elem.getContext('2d');
  if (!context) {
    return;
  }
// Zde vkládáme modrý text!
  context.fillStyle    = '#00f';
 
  // Zde vkladáme CSS styly pro text!
  context.font         = 'italic 30px sans-serif';
  context.textBaseline = 'top';
 
  if (context.fillText) {
    context.fillText('VLOŽENÍ TEXTU!!!', 0, 0);
  }
 
  // Zřejmě váš web nepodporuje strokeText metodu.
  context.font = 'bold 30px sans-serif';
  if (context.strokeText) {
    context.strokeText('VLOŽENÍ TEXTU!!!', 0, 40);
  }
}, false);
    // --></script> 
  </head> 
  
 <body> 
  <p><canvas id="myCanvas" width="300" height="150">Váš prohlížeč bohužel nepodporuje tag canvas. 
Mělo by být vykresleno jako: <img 
    src="images/example-text.jpg" alt="Příklad vykreslení textu."></canvas></p> 
  </body> 
</html>

Na výsledek se podívejte zde: vlozeni_textu.html