HTML5 - Kreslení křivek

Obsah
Kreslení křivek na plátno může být jednoduché nebo složité, vše závisí na tom, čeho chcete dosáhnout, můžete vytvořit několik zajímavých efektů, které bychom mohli použít k vytvoření některých funkcí na naší stránce, které vyčnívají ze zbytku vytvořených stránek. v HTML5.
Jednou z věcí, které můžeme udělat, je poskytnout pokročilé zacházení s vytvářením zakřivených čar, u tohoto typu nástrojů budeme mít blíže k tomu, abychom neměli omezení, když přemýšlíme o tom, co naše stránka dokáže.
Při pohybu myší nakreslete křivku
Tento případ je docela zajímavý, protože při pohybu myší nakreslíme křivku, navíc pokud stiskneme libovolnou klávesu na klávesnici, některé body křivky se změní.
Pokud například stiskneme klávesu ctrl, první bod, který představuje konec dílčí cesta, pokud stiskneme klávesu Shift, přesune se druhý bod, což jsou první dva argumenty metody arcTo () a nakonec, pokud nestiskneme žádnou klávesu, přesune se třetí bod, který je reprezentován posledními dvěma argumenty metody.
Podívejme se níže na kód, kterým dosáhneme těchto efektů:
 Příklad Váš prohlížeč prvek nepodporuje plátno 

Jak vidíme, nejprve v kódu definujeme obslužný program přijímání událostí kláves, které stiskneme, v něm stanovíme hodnoty, které je třeba vzít.
Podívejme se níže na snímek obrazovky, jak by to mohlo vést k našemu prohlížeči, je důležité zmínit, že při reprodukci tohoto příkladu se výsledky mohou lišit:

Pomocí metody Arc
Dříve jsme používali pouze tuto metodu arcTo ()Nyní uvidíme, jak metoda arc () funguje, její manipulace je snazší, protože pomocí prvních dvou argumentů zadáme bod na plátně a poté poloměr a úhel křivky.
Podívejme se na následující příklad, jak pomocí této metody nakreslit tři typy křivek:
 Příklad Váš prohlížeč prvek nepodporuje plátno 

Pojďme se nyní podívat, jak to vypadá v našem prohlížeči:

Jak vidíme, první a druhý příklad jsou kruhy, jeden úplný a druhý s malým otvorem, na druhé straně třetí kruh je zcela nepravidelný a ukazuje nám univerzálnost metody arc ().Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
wave wave wave wave wave