Tag <canvas> HTML5

Nová značka je značka <canvas> HTML5 není k dispozici v předchozích verzích, které lze použít pro kreslení a práci s grafikou.

Tag <canvas> potřebuje podporu skriptovacího jazyka, jako je JavaScript pro správnou funkci a provádět plně svůj potenciál.

Účelem tohoto článku je objasnit základní použití nových značek, ale některé body předložené neustálé používání praktických příkladů, jak doufám, usnadní učení.

Předpoklad

Jako absolutní novinku v nejlepším plátně není podporován všemi prohlížeči, takže je možné, že demonstrační příklady v tomto článku se nezobrazují správně.
Zkouška byla provedena s Google Chrome, na kterém jste nezažil žádné problémy.

Použijte tag <canvas>

Běžné používání plátna značka je velmi jednoduchá a nijak neliší od ostatních HTML tagy.
Formálně plátno je jednoduchý obal, a jako taková má otevírací tag (<canvas>) a uzavření (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Element není podporován







 </ Canvas>

Pokud rozměry nejsou uvedeny explicitně (pomocí atributů width a height) velikost kontejneru přidělené je výchozí, základní obdélníku s výškou 300 a 150.
Id atributu, samozřejmě, není podstatné, ale podle mého názoru, je vždy dobré zavolat mít jedinečný odkaz pro každý objekt, který je používán na stránce.

Textové části vymezené <canvas> a </ plátno> reprezentovat POZNÁMKA označuje, kdy je grafika nepodporuje vašem prohlížeči.

Před zahájením implementačních detailů testu potenciál plátno jednoduchého kódu k testování Live:

 <canvas id="bandierina" width="180"> height = "100"> není podporováno </ Canvas>







 <script type="text/javascript">







 var plátna = document.getElementById ('flag');







 var c = canvas.getContext ('2 d ');







 c.fillStyle = "# FF0000";







 c.fillRect (0,0,180,100);







 c.fillStyle = "# FFFFFF";







 c.fillRect (0,0,120,100);







 c.fillStyle = "# 00FF00";







 c.fillRect (0,0,60,100);







 </ Script>

Na této stránce můžete vidět výsledek tohoto kodexu (vidět výstup správně, musíte mít opět prohlížeč, který podporuje HTML 5).

Jak již bylo oznámeno na začátku článku v této části kódu je výslovně uvedl, že plátno práce pomocí skriptu. Z tohoto příkladu můžeme okamžitě na vědomí, standardní techniky extrahovat proměnné objektu plátno na pozadí:

 / / Vytvoření plátno položku ID







 var plátna = document.getElementById ('flag');









 / / Vytvoření nového dvou-dimenzionální objekt na plátně







 var c = canvas.getContext ('2 d ');

Javascript getElementById metoda uloží objekt do proměnné plátno, a to prostřednictvím hodnota jeho id pole, getContext ('2 d) se kontextu, nebo objekt, který nabízí programátorovi několik metod pro práci s plátnem as požadovanou (v našem případě, že chcete pracovat s dvou-rozměrné grafické funkce, tj. 2D).

Na následujících stránkách budeme Seznam některé základní operace, užitečné pro programátora hodlá využít plátna.

• <<
• 1
• 2
• 3
• 4
• 5
• >>