Inhoudsopgave
Het element Canvas Het is een van de meest verwachte nieuwigheden die het heeft HTML5 Omdat het een serieus alternatief is voor de Flash-plug-in van Adobe, dankzij de native mogelijkheden en door niet afhankelijk te zijn van een bibliotheek van derden, krijgen we direct stabiliteit en browserondersteuning, in het geval van een probleem met de implementatie van de HTML5-standaard .Het element Canvas stelt ons in staat om een gebied in onze documenten af te bakenen HTML5 waar we kunnen tekenen en zelfs effecten en bewegingen kunnen toevoegen via Javascript.
Het canvas-element
Voordat u aan de slag kunt met het item Canvas, we gaan de basiskenmerken ervan definiëren, we hebben dat het een stroomelement is, het is totaal nieuw in HTML5, de attributen zijn hoogte voor de hoogte en breedte voor de breedte.
Laten we hieronder een klein voorbeeld bekijken van hoe we een canvas in ons document kunnen definiëren:
Voorbeeld Uw browser ondersteunt het element niet canvas Laten we snel kijken wat er in het voorbeeld gebeurt; eerst definiëren we een stijl waarbij we een enigszins dikke rand toewijzen om onze . te kunnen onderscheiden Canvas leeg, dan starten we het Canvas-element met zijn openingslabel en definiëren de hoogte- en breedteattributen, binnen de labels plaatsen we een bericht voor het geval het document wordt geopend met een browser die deze specificatie van de standaard niet ondersteunt.
Laten we nu eens kijken hoe deze code die we zojuist hebben uitgelegd eruitziet in onze browser:
Onze eerste tekening
Zoals we aan het begin van de tutorial vermeldden, moeten we Javascript gebruiken om te tekenen en acties uit te voeren binnen het Canvas, hiervoor gebruiken we een methode genaamd getContext () dat plaatst ons in de context van het Canvas en daarmee kunnen we het vertellen wat we moeten laten zien.
We kunnen figuren zowel in 2D als in 3D tekenen, hiervoor passeren we in het geval van de eerste, het argument "2d".
Laten we eens kijken naar het volgende voorbeeld om beter te definiëren wat we uitleggen:
Voorbeeld Uw browser ondersteunt het element niet canvas Hier hebben we gewoon een variabele gedefinieerd ctx waaraan we het object gaan toewijzen document en de laatste gaat de methode aanroepen getContext en pas het toe op het Canvas-element; dan hebben we dat de variabele ctx een methode aanroept genaamd vulRect en hieraan geven we enkele coördinaten door, als we goed kijken, passeren we het 4 kanten, laten we zien dat het dit in de browser heeft getekend:
