HTML5 - Bézier-curven

De Bézier-curven, Het zijn een soort curven die veel worden gebruikt in teken- en grafische programma's, omdat ze ons in staat stellen curven te genereren met sommige punten in het vlak, dankzij dit kunnen we met enkele wiskundige formules vloeiende of meer exacte curven bereiken, die we kunnen gebruiken om te geven u meer details naar onze grafieken.
In HTML5 we hebben de mogelijkheid om de Bézier-curven Dankzij verschillende methoden kunnen we kwadratische en kubieke curven opnemen, de beperking is dat we op het canvas geen visuele ondersteuning hebben van waar we de referentiepunten hebben.
Methoden om de curven te genereren
Zoals we al hebben uitgelegd, worden de Bezier-curven op sommige punten ondersteund om de tekening te kunnen maken, om de gewenste curve te bereiken moeten we veel experimenten doen, maar om te experimenteren moeten we eerst de achtergrond kennen, dus daarna gaan we gaan de bijbehorende informatie zien met de methoden waarmee we deze curven kunnen tekenen:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Teken een Bezier-curve van het kubische type waar de punten (x, y) samenkomen met behulp van de controlepunten (cx1, cy1) en (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Teken een kwadratische Bézier-curve naar de punten (x, y) met het controlepunt (cx, cy).
We kennen al het technische aspect waarmee we moeten werken, nu gaan we een voorbeeld in code zien.
In dit voorbeeld gaan we een kubieke Bézier-curve tekenen, waarbij we de laatste als uitgangspunt nemen subpad en breng het dan naar de punten van de laatste twee argumenten die de methode ontvangt, bovendien bevat het een functionaliteit die als we op de shift- of ctrl-toets op ons toetsenbord drukken, de begin- en eindpunten van de curve veranderen.

 Voorbeeld Uw browser ondersteunt het element niet canvas 

Zodra we de code hebben, laten we eens kijken wat het genereert in de browser, we beperken dat omdat het een dynamische sectie bevat, de resultaten kunnen variëren:

Als we kijken, hebben we de vier controlepunten gemarkeerd door de rode lijnen die we in de schermafbeelding zien.
Hiermee ronden we deze tutorial over Bezier-curven af, de sleutel is experimenteren als we complexere effecten willen bereiken die zijn gekoppeld aan wat we nodig hebben.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