Mærket <canvas> HTML5

Det nye tag er et tag <canvas> HTML5 ikke er til stede i tidligere versioner, som kan bruges til at tegne og arbejde med grafik.

Mærket <canvas> behov for et scriptsprog støtte, såsom JavaScript for at fungere korrekt og udføre fuldt ud sit potentiale.

Formålet med denne artikel er at illustrere den grundlæggende brug af de nye mærker, men nogle punkter fremført af den konstante brug af praktiske eksempler, jeg håber, vil gøre det lettere at lære.

Premise

Som en absolut nyhed i den bedste lærredet ikke understøttes af alle browsere, så det er muligt, at demonstrationen eksemplerne i denne artikel ikke vises korrekt.
Testen blev udført med Google Chrome, som du ikke har oplevet nogen problemer.

Brug tag <canvas>

Den fælles brug af Canvas tag er temmelig enkel og adskiller sig ikke fra andre HTML-tags.
Formelt Canvas er en enkel beholder, og som sådan en åbning tag (<canvas>) og lukning (</ Canvas>) har:

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

 





 Element understøttes ikke







 </ Canvas>

Hvis målene ikke er angivet eksplicit (ved hjælp af attributter bredde og højde) størrelsen er tildelt til containeren er standard, en grundlæggende rektangel med højde 300 og 150.
Id attribut, selvfølgelig, er ikke afgørende, men efter min mening, er det altid en god idé at ringe for at få en unik reference for hvert objekt, der bruges på siden.

Teksten del afgrænses af <canvas> og </ lærred> til at repræsentere noten viser, når grafikken ikke understøttes af din browser.

Før du starter med nærmere oplysninger om gennemførelsen teste potentialet i lærred med en simpel kode til at teste leve:

 <canvas id="bandierina" width="180"> height = "100"> Ikke Understøttet </ lærred>







 <script type="text/javascript">







 var lærred = 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>

På denne side kan du se resultatet af denne kode (for at se outputtet korrekt, du skal have endnu en gang, en browser, der understøtter HTML 5).

Som allerede annonceret i starten af ​​artiklen i denne del af koden er det udtrykkeligt fremgår, at lærredet arbejde ved hjælp af et script. Ud fra dette eksempel kan vi straks bemærke den standard teknik til at udvinde det objekt lærred baggrundsvariable:

 / / Opret lærredet element ved id







 var lærred = document.getElementById ('flag');









 / / Opret en ny to-dimensionelt objekt på lærredet







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

Javascript getElementById metode gemmer objekt i en variabel lærred, gennem værdien af dens id område; getContext ('2 d ') tager kontekst eller et objekt, der giver programmøren en række metoder til at arbejde med på lærredet som ønskede (i vores tilfælde, du ønsker at arbejde med de to-dimensionel grafik-funktioner, dvs 2D).

På de følgende sider vil vi liste nogle grundlæggende operationer nyttigt at programmøren har til hensigt at gøre brug af lærred.

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