Innehållsförteckning
I grund och botten är alla figurer gjorda av linjer och kurvor, i många fall kan vi simulera kurvor med mycket korta linjer och i stort antal, men detta är mycket komplext och kräver exceptionellt arbete, HTML5 och dess praktiska ger oss Arc -metoden Med vilka vi kan utveckla böjda linjer och på något sätt kunna komplettera våra ritningar.Arc -metoden
Som vi nämnde i början tillåter denna metod oss att generera krökta linjer inom elementet duk utan större komplexitet, utan att behöva införa komplexa matematiska formler som kan behöva göras i vissa programmeringsspråk.
Innan vi ser hur denna metod fungerar måste vi känna till dess egenskaper och egenskaper, vi kommer att se dem nedan i följande lista:
- båge (x, y, rad, startangle, endangle, riktning): Denna metod ritar en kurva vid koordinaterna (x, y) med en radie rad, startvinkeln är initialvinkel och slutet på vinkeln är vinkelFinal. Vi har en valfri parameter som är adress och anger den riktning som kurvan som ritas av metoden kommer att ta.
- arcTo (x1, y1, x2, y2, rad): Denna metod tillåter oss att rita en kurva till koordinaterna (x2, y2) som passerar koordinaterna (x1, y1) och har en radie rad.
Som vi kan se har vi två grundläggande metoder som tillåter oss allt som behövs för att kunna dra de böjda linjerna i vår duk element, låt oss nu se en liten kod så att vi kan visa hur vi kan omsätta det vi just sett:
Exempel Din webbläsare stöder inte duk element Vi har gjort den krökta linjen i exemplet med hjälp av metoden arcTo () som vi tidigare hade beskrivit, för att rita denna kurva är vi beroende av två rader, den första dras från slutet av den sista delvägen till den punkt som beskrivs av de två första metodargumenten och den andra raden dras från den punkt som beskrivs av de två första argumenten till den punkt som beskrivs av det tredje och fjärde argumentet.
Slutligen ritas kurvan som den kortaste linjen mellan den sista delvägen och den andra punkten som beskriver en cirkelkurva med radien som anges av det sista argumentet, så att vi kan se vad vi menar, koden innehåller några rader med referens i rött. Låt oss se nedan en bild av hur detta ser ut i vår webbläsare:
