HTML5 oznaku <canvas>

Nova oznaka je oznaka HTML5 <canvas> nije prisutan u prethodnim verzijama, koji se mogu koristiti za crtanje i rad sa slikama.

Tag <canvas> treba potporu skriptni jezik, kao što su JavaScript da bi mogao ispravno funkcionirati i obavljati svoj potencijal u potpunosti.

Svrha ovog članka jest prikazati osnovna koristiti nove oznake, ali neke bodove napredne stalnim korištenjem praktičnih primjera, nadam se, olakšati učenje.

Pretpostavka

Kao apsolutni novitet u najboljem platnu ne podržava sve preglednike, pa je moguće da demonstracija primjera u ovom članku se ne prikazuje ispravno.
Ispitivanje je provedeno s preglednikom Google Chrome, na kojem nisu doživjeli nikakve probleme.

Koristite <canvas> oznaku

Zajedničko korištenje platna oznake je prilično jednostavan i ne razlikuje od drugih HTML tagova.
Formalno Canvas je jednostavno kontejner i, kao takav, ima otvor oznaku (<canvas>) i zatvaranje (</ Canvas>):

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

 





 Element nije podržan







 </ Canvas>

Ako dimenzije nisu navedeni izrijekom (koristeći atribute širina i visina) veličine dodijeljen kontejner je zadana, osnovni pravokutnik visine 300 i 150.
ID atribut, naravno, nije bitno, ali, po mom mišljenju, to je uvijek dobra ideja nazvati da imaju jedinstveni referentni za svaki objekt koji se koristi na stranici.

Razgraničena tekstna dio po <canvas> i </ platno> za zastupanje NAPOMENA ukazuje kada grafički nije podržano u Vašem pregledniku.

Prije početka s provedbom detaljima ispitivanja potencijala platnu s jednostavnim kodom na test uživo:

 <canvas id="bandierina" width="180"> visina = "100"> Nije podržano </ Canvas>







 <script type="text/javascript">







 var = document.getElementById platnu ('Zastava');







 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 ovoj stranici možete vidjeti rezultat toga kod (Da biste vidjeli ispravno izlaz, morate imati, opet, preglednik koji podržava HTML 5).

Kao što je već najavio na početku ovog članka u ovom dijelu koda je eksplicitno činjenica da rade platnu pomoću skripte. Iz ovog primjera možemo odmah napomenuti standardne tehnike za izdvajanje objekta varijabli platnu pozadina:

 / / Stvaranje stavka platnu ID







 var = document.getElementById platnu ('Zastava');









 / / Stvori novu dvodimenzionalni objekt na platnu







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

Javascript getElementById metoda trgovina objekt u varijablu platnu, kroz vrijednost njegove ID polje; getContext ('2 d ') traje kontekstu, odnosno objekt koji nudi programer brojne metode za rad s platna kao željeni (u našem slučaju da želite raditi sa dvodimenzionalnim grafike funkcija, tj., 2D).

Na sljedećim stranicama ćemo popis nekih osnovnih operacija korisno programer namjerava iskoristiti platnu.

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