Inhoudsopgave
Bij gebruik van het item: canvas om te tekenen zijn we niet beperkt tot het tekenen van rechthoekige figuren, we kunnen ook tekenen met behulp van coördinaten en de zogenaamde paden dat zijn paden waarmee we het element zullen aangeven canvas waar en hoe onze tekening te laten zien.De mogelijkheden die dit ons geeft zijn indrukwekkend, want met de nodige algoritmes kunnen we onbeperkt composities maken, elk type figuur intekenen HTML5 en daarmee tot het bereiken van in combinatie met andere elementen resultaten die nooit waren gedacht in eerdere specificaties van de taal.
Pad gebruiken
Zoals we al zeiden de pad is wat ons in staat zal stellen om aan het canvas de coördinaten aan te geven waarmee de tekening moet worden gemaakt, met deze coördinaten zal het canvas kunnen weten waar de overeenkomstige lijnen moeten worden getekend en uiteindelijk kunnen we met de juiste accumulatie van lijnen elke soort figuur.
Voordat we verder gaan met de bijbehorende voorbeelden, moeten we weten welke methoden beschikbaar zijn voor het canvas-element en het pad, laten we de volgende lijst bekijken:
- beginPath (): Deze methode stelt ons in staat om een nieuwe weg in te slaan.
- closePath (): Deze methode probeert het huidige pad te sluiten door een lijn te trekken vanaf het einde van de laatste lijn naar de initiële coördinaten.
- vullen (): Vul de formulieren in die worden beschreven door de subpaden.
- isPuntInPath (x, y): Retourneert waar als het opgegeven punt zich in de vorm bevindt die door het huidige pad wordt getekend.
- lijnNaar (x, y): Teken een subpad op de opgegeven coördinaten.
- verplaatsenNaar (x, y): Het stelt ons in staat om naar de opgegeven coördinaten te gaan zonder een subpad te hoeven tekenen.
- recht (x, y, w, h): Teken een rechthoek waarvan de coördinaten in de linkerbovenhoek overeenkomen met (x, y), de breedte komt overeen met w en de hoogte komt overeen met h.
- hartinfarct (): Teken de buitenste lijnen van de vormen die door het subpad zijn getekend.
• We noemen de methode beginPath.
• We gaan naar de beginpositie met behulp van de methode verplaatsenNaar.
• We tekenen de subpaden met de methoden lijnTo, enz.
• Optioneel kunnen we de methode noemen closePath.
• Ten slotte noemen we de methoden vullen of stoken.
We hebben al de aanbevolen volgorde om te beginnen met tekenen, nu zien we de bijbehorende code in HTML5.
Voorbeeld Uw browser ondersteunt het element niet canvas Zoals we kunnen zien, worden er twee oproepen gedaan naar: beginPath(), hiermee kunnen we de tekengebieden op het canvas starten en met moveTo () bepalen we de beginposities en de rest is om te tekenen.
Laten we eens kijken hoe onze tekening eruitziet in de browser:
