De tag <canvas> HTML5

De nieuwe tag is een tag <canvas> HTML5 is niet aanwezig in de vorige versies, die kan worden gebruikt om te tekenen en te werken met afbeeldingen.

De tag <canvas> heeft een scripttaal ondersteunen, zoals het JavaScript om goed te functioneren en uit te voeren ten volle de mogelijkheden.

Het doel van dit artikel is te illustreren het basisgebruik van de nieuwe tags, maar enkele punten voorgeschoten door het constante gebruik van praktische voorbeelden, hoop ik, zal het leren.

Premisse

Als een absolute noviteit in de beste doek wordt niet ondersteund door alle browsers, dus het is mogelijk dat de demonstratie voorbeelden in dit artikel niet correct worden weergegeven.
De test werd uitgevoerd met Google Chrome, waarop u niet hebt ervaren geen problemen.

Gebruik de tag <canvas>

Het gemeenschappelijk gebruik van het Canvas-tag is vrij eenvoudig en niet van andere HTML-tags.
Formeel Canvas is een eenvoudige container en als zodanig heeft een opening tag (<canvas>) en sluiten (</ Canvas>):

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

 





 Element wordt niet ondersteund







 </ Canvas>

Indien de afmetingen zijn niet expliciet aangegeven (met behulp van de attributen breedte en hoogte) de omvang is toegewezen aan de container is de standaard, een basic rechthoek met hoogte 300 en 150.
Het id attribuut, natuurlijk, is niet essentieel, maar naar mijn mening, is het altijd een goed idee om te bellen om een unieke referentie voor elk object dat wordt gebruikt op de pagina te hebben.

De tekst gedeelte begrensd door <canvas> en </ doek> om de notitie te vertegenwoordigen geeft aan wanneer de afbeelding wordt niet ondersteund door uw browser.

Alvorens te beginnen met de implementatie details test het potentieel van canvas met een simpele code om te testen leven:

 <canvas id="bandierina" width="180"> height = "100"> Niet ondersteund </ Canvas>







 <script type="text/javascript">







 var canvas = document.getElementById ('vlag');







 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>

Op deze pagina ziet u het resultaat van deze code (op de uitgang correct moet u opnieuw een browser die HTML 5 ondersteunt zien).

Zoals reeds aangekondigd bij het begin van het artikel in dit deel van de code is uitdrukkelijk het feit dat het doek werken een script gebruikt. Uit dit voorbeeld kunnen we meteen nota van de standaard techniek om het object te canvas achtergrond variabelen uit te pakken:

 / / Maak het doek item door ID







 var canvas = document.getElementById ('vlag');









 / / Maak een nieuwe twee-dimensionaal object op het canvas







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

Javascript getElementById methode slaat het object in een variabele doek, door de waarde van zijn id veld; getContext ('2 D ') neemt de context, of een object dat biedt de programmeur een aantal methoden om met het doek werk als gewenste (in ons geval u wilt werken met de twee-dimensionale grafische functies, dat wil zeggen, 2D).

In de volgende pagina's zullen we de lijst een aantal basishandelingen nuttig zijn om de programmeur van plan is om gebruik te maken van het doek.

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