Canvas API umožňuje kreslení grafiky s pomocí JavaScriptu. Můžeme tak kreslit grafy, ale také vytvářet například animace, vkládat text, obrázky atd. Využití je například u her, lze vytvářet interaktivní pozadí atd. Kreslení probíhá pomocí kontextu. Zatím je sice poskytována pouze 2D implementace, ale 3D verze je pravděpodobně pouze otázkou času.
Podpora v prohlížečích:
Aktuální verze nejvýznamnějších prohlížečů Canvas API podporují (Chrome, Firefox, Opera, Safari). Internet Explorer by měl přinést podporu v připravované verzi 9. Jinak pro IE může být v současnosti řešením použití explorercanvas. (Toto řešení je postavené na VML technologii.) Stačí jenom přidat ke stránce jeden skript. Existují také řešení s použitím Silverlight jako například tento projekt.
Pokud prohlížeč podporu nenabízí, je možné zobrazit text nebo alternativní obrázek.
Následuje jednoduchá ukázka řešení pomocí html:
<canvas style="border: 1px solid;height:50px;width:50px;">Canvas není podporován!</canvas>
Pokud stránku zobrazím v aktuální verzi Opery, dostanu tento výsledek:
Pokud zvolím nejnovější verzi Internet Exploreru, bude výsledek tento:
Lepší řešení ale bude použít k detekci JavaScript a zareagovat na danou situaci.
Použití:
Prvním krokem k použití je vložení tagu do html kódu stránky :
<canvas></canvas>
Značka canvas se na stránce může vyskytovat vícekrát. Identifikace je vhodná pomocí id atributu.
Následně můžeme použít JavaScript ke kreslení. Nejprve je vždy třeba získat kontext, na kterém se provádějí operace. Počátek je umístěn v levém horním rohu, první souřadnice udává posun v horizontálním (x) směru a druhá ve vertikálním (y).
Triviální ukázka:
Vložíme do stránky značku canvas:
<canvas id="testcanvas" style="border: 1px solid;height:200px;width:200px;"></canvas>
Potom si při události načtení stránky, stisku tlačítka atd. spustíme následující kód:
var canvas = document.getElementById('testcanvas');
var context = canvas.getContext('2d');
context.translate(50, 50);
context.beginPath();
context.fillStyle='#D1282E';
context.fillRect(0,0,50,50);
context.strokeRect(50, 0, 50, 50);
Výsledek (Opera 11):
Odkazy:
Dive Into HTML 5 - Podrobný popis s příklady
2025 ©