PC-politika.cz - Novinky: HTML5: grafické plátno canvas [1] PC-politika

Nová specifikace HTML 5 přináší řadu nových tagů. Důležité je správně takové tagy použít. To samozřejmě závisí na obsahu celkové stránky/dokumentu na www stránce. Dnes nás bude zajímat umístění grafických prvků do plátna (canvas). Tedy jednoduše a rychle na HTML 5 stránku. Slouží k tomu stejnojmenný tag <canvas>, což je API canvas. Jak s ním pracujeme?

U každého tagu/elementu/značky canvas, pracujeme s vlastností context a 2D implementací. Zde vkládáme JavaScript metody, jimiž můžeme kreslit různé tvary. Jednotlivé browsery context berou, lze jich použít i více s různými API. Problémy má pouze prohlížeč IE, a to včetně ukládání obrázků.

Ukázka č.1 canvas

Nyní přejdu na prováděcí kód/skcript. Plátno HTML5 tagu/elementu využívá chytře JavaScript, a to pro kreslení grafiky na webové stránce, nebo vkládání textu, animace i obrázků. Jde o canvas/plátno obdélníkové oblasti. Canvas má několik metod např. pro kreslení cest, obdélníků, kruhů, znaků či přidávání obrázků, animace atd. Nejprve nasadím příslušny content, k němuž se vztahují příslušné operace. Počátek je umístěn vždy vlevo. Např. cxt.fillRect(0,0,300,75); nám určuje velikost vnitřního (červeného rámečku) který vkládáme apod. Takto vypadá realizační kód HTML 5 a JavaCsript:

//canvas1.html
<!DOCTYPE HTML>
<head>
<title<Canvas1</title>
<meta http-equiv='Content-Type' content='text/html; charset='utf-8'>
</head>
<body>

<canvas id="myCanvas" width="300" height="200" style="border:2px solid #c3c3c3;">
Jak vidíte, váš prohlížeč zobrazuje tag canvas.
</canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,300,75);
</script>
</body>
</html>