Koden <canvas> HTML5

Den nye koden er en kode <canvas> HTML5 er ikke til stede i tidligere versjoner, som kan brukes til å tegne og jobbe med grafikk.

Koden <canvas> trenger et skriptspråk støtte, for eksempel JavaScript for å fungere skikkelig og utføre fullt ut sitt potensiale.

Formålet med denne artikkelen er å illustrere grunnleggende bruk av nye koder, men noen punkter avanserte ved konstant bruk av praktiske eksempler, håper jeg, vil gjøre det lettere å lære.

Premiss

Som en absolutt nyhet på best lerretet ikke støttes av alle nettlesere, så det er mulig at demonstrasjonen eksemplene i denne artikkelen ikke vises riktig.
Testen ble gjennomført med Google Chrome, som du ikke har opplevd noen problemer.

Bruk taggen <canvas>

Den vanlige bruken av lerret taggen er ganske enkel og ikke forskjellig fra andre HTML-koder.
Formelt lerret er en enkel container, og som sådan har en åpning tag (<canvas>) og lukking (</ Canvas>):

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

 





 Element støttes ikke







 </ Canvas>

Hvis størrelsen ikke er angitt eksplisitt (ved hjelp av attributter bredde og høyde) størrelsen tildelt beholderen er standard, en grunnleggende rektangel med høyde 300 og 150.
Den id attributt, selvfølgelig, er ikke avgjørende, men i min mening, er det alltid en god ide å ringe for å ha en unik referanse for hvert objekt som blir brukt på siden.

Teksten delen avgrenset av <canvas> og </ lerret> for å representere notatet indikerer når grafikken ikke støttes av nettleseren din.

Før du starter med gjennomføringen detaljer teste potensialet til lerretet med en enkel kode for å teste leve:

 <canvas id="bandierina" width="180"> height = "100"> støttes ikke </ Canvas>







 <script type="text/javascript">







 var lerret = document.getElementById ('flagg');







 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>

På denne siden kan du se resultatet av denne koden (se utgang riktig, du må ha, igjen, en nettleser som støtter HTML 5).

Som allerede annonsert i begynnelsen av artikkelen i denne delen av koden er tydelig at lerretet arbeidet med et skript. Fra dette eksempelet kan vi umiddelbart merke til standard teknikk for å hente ut objektet lerretet bakgrunnsvariabler:

 / / Opprett lerretet elementet ved ID







 var lerret = document.getElementById ('flagg');









 / / Opprett en ny to-dimensjonale objekt på lerretet







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

Javascript getElementById metoden lagrer objektet i en variabel lerret, gjennom verdien av id felt; getContext ('2 d ') tar sin sammenheng, eller et objekt som tilbyr programmerer en rekke metoder for å arbeide med lerretet som ønsket (i vårt tilfelle du ønsker å arbeide med to-dimensjonal grafikk funksjoner, dvs. 2D).

I de følgende sidene vil vi liste noen grunnleggende operasjoner nyttig å programmerer til hensikt å gjøre bruk av lerretet.

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