Inhoudsopgave
In principe zijn alle figuren gemaakt van lijnen en bochten, in veel gevallen kunnen we bochten simuleren met zeer korte lijnen en in grote aantallen, dit is echter zeer complex en vereist uitzonderlijk werk, HTML5 en de bruikbaarheid ervan bieden ons de Boog methode: Waarmee we gebogen lijnen kunnen ontwikkelen en op de een of andere manier onze tekeningen kunnen aanvullen.Boog methode:
Zoals we aan het begin vermeldden, stelt deze methode ons in staat om gebogen lijnen binnen het element te genereren canvas zonder grotere complexiteit, zonder de noodzaak om complexe wiskundige formules in te voeren, zoals in sommige programmeertalen moet worden gedaan.
Voordat we zien hoe deze methode werkt, moeten we de kenmerken en eigenschappen ervan kennen, we zullen ze hieronder in de volgende lijst zien:
- boog (x, y, rad, startangle, endangle, direction): Deze methode tekent een kromme op de coördinaten (x, y) met een straal rad, de starthoek is beginhoek en het einde van de hoek is hoekFinale. We hebben een optionele parameter die is adres en specificeert de richting waarin de curve getekend door de methode zal nemen.
- arcTo (x1, y1, x2, y2, rad): Met deze methode kunnen we een curve tekenen naar de coördinaten (x2, y2) die de coördinaten (x1, y1) passeren en een straal hebben rad.
Zoals we kunnen zien, hebben we twee basismethoden waarmee we alles hebben wat nodig is om de gebogen lijnen in onze canvaselement, laten we nu een kleine code bekijken zodat we kunnen laten zien hoe we in de praktijk kunnen brengen wat we zojuist hebben gezien:
Voorbeeld Uw browser ondersteunt de canvas element We hebben de gebogen lijn in het voorbeeld gemaakt met behulp van de methode boog naar () die we eerder hadden beschreven, om deze curve te tekenen zijn we afhankelijk van twee lijnen, de eerste wordt getrokken vanaf het einde van het laatste subpad naar het punt beschreven door de eerste twee methodeargumenten en de tweede lijn wordt getrokken vanaf het punt beschreven door de eerste twee argumenten tot het punt dat wordt beschreven door de derde en vierde argumenten.
Ten slotte wordt de curve getekend als de kortste lijn tussen het laatste subpad en het tweede punt dat een curve van een cirkel beschrijft met de straal gespecificeerd door het laatste argument, zodat we kunnen zien wat we bedoelen, de code bevat enkele regels van verwijzing in het rood. Laten we hieronder een afbeelding bekijken van hoe dit eruitziet in onze browser:
