HTML5 - Curven tekenen

Het tekenen van krommen op een canvas kan eenvoudig of complex zijn, het hangt allemaal af van wat je wilt bereiken, je kunt een aantal interessante effecten maken, die we zouden kunnen gebruiken om enkele functionaliteiten op onze pagina te bouwen, die opvallen tussen de rest van de gemaakte pagina's in HTML5.
Een van de dingen die we kunnen doen, is het maken van gebogen lijnen op een geavanceerde manier afhandelen, met dit soort hulpmiddelen zullen we dichter bij het hebben van geen beperkingen als we nadenken over wat onze pagina kan doen.
Teken een curve bij het bewegen van de muis
Dit geval is best interessant, want wat we doen is een curve tekenen wanneer we de muis bewegen, bovendien veranderen sommige punten van de curve als we op een toets op ons toetsenbord drukken.
Als we bijvoorbeeld op de ctrl-toets drukken, wordt het eerste punt dat het einde van de voorstelt, subpad, als we op de shift-toets drukken, wordt het tweede punt verplaatst, wat de eerste twee argumenten van de methode zijn boog naar () en tot slot, als we op geen enkele toets drukken, zal het derde punt dat wordt vertegenwoordigd door de laatste twee argumenten van de methode, worden verplaatst.
Laten we hieronder de code bekijken waarmee we deze effecten bereiken:

 Voorbeeld Uw browser ondersteunt het element niet canvas 

Zoals we kunnen zien, definiëren we eerst in de code de handler van de ontvangst van gebeurtenissen van de toetsen die we indrukken, daarin stellen we de waarden vast die moeten worden genomen.
Laten we hieronder een screenshot zien van hoe dit zou kunnen resulteren in onze browser, het is belangrijk om te vermelden dat de resultaten dynamisch kunnen zijn bij het reproduceren van dit voorbeeld:

De boogmethode gebruiken
Voorheen hadden we alleen de methode gebruikt boog naar ()Nu zullen we zien hoe de methode arc () werkt, de bediening ervan is eenvoudiger, omdat we een punt op het canvas specificeren via de eerste twee argumenten en vervolgens de straal en hoek van de curve.
Laten we het volgende voorbeeld bekijken van hoe u met deze methode drie soorten curven kunt tekenen:

 Voorbeeld Uw browser ondersteunt het element niet canvas 

Laten we nu eens kijken hoe dit eruit ziet in onze browser:

Zoals we zien zijn de eerste en tweede voorbeelden cirkels, de ene compleet en de andere met een kleine opening, aan de andere kant is de derde cirkel totaal onregelmatig en toont ons de veelzijdigheid van de boog () methode.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven