HTML5 - Bezierovy křivky

Obsah
The Bezierovy křivky„Jsou to typ křivek široce používaných v kreslících a grafických programech, protože nám umožňují generovat křivky s některými body v rovině, díky tomu s některými matematickými vzorci můžeme dosáhnout hladkých nebo přesnějších křivek, které můžeme použít k zadání více podrobností o našich grafech.
v HTML5 máme možnost implementovat Bezierovy křivky Díky různým metodám můžeme zahrnout kvadratické a kubické křivky, omezením je, že na plátně nemáme vizuální podporu, kde máme referenční body.
Metody pro generování křivek
Jak jsme již vysvětlili, Bezierovy křivky jsou v některých bodech podporovány, aby bylo možné kreslit, abychom dosáhli požadované křivky, musíme provést mnoho experimentů, ale abychom mohli experimentovat, musíme nejprve znát pozadí, takže příště uvidí odpovídající informace pomocí metod, které nám umožňují nakreslit tyto křivky:
bezierCurveTo (cx1, cy1, cx2, cy2, x, y): Nakreslete Bézierovu křivku krychlového typu, kde se setkávají body (x, y) pomocí kontrolních bodů (cx1, cy1) a (cx2, cy2).
quadraticCurveTo (cx, xy, x, y): Nakreslete kvadratickou Bezierovu křivku do bodů (x, y) s kontrolním bodem (cx, cy).
Technický aspekt, se kterým musíme pracovat, již známe, nyní uvidíme příklad v kódu.
V tomto případě nakreslíme krychlovou Bézierovu křivku, kde vezmeme poslední jako výchozí bod dílčí cesta a poté ji vezmeme k bodům posledních dvou argumentů, které metoda obdrží, navíc obsahuje funkci, která když stiskneme na klávesnici klávesu shift nebo ctrl, změní se počáteční a koncový bod křivky.
 Příklad Váš prohlížeč prvek nepodporuje plátno 

Jakmile máme kód, podívejme se, co generuje v prohlížeči, omezujeme to tím, že obsahuje dynamickou sekci, výsledky se mohou lišit:

Když se podíváme, máme čtyři kontrolní body označené červenými čarami, které vidíme na snímku obrazovky.
Tímto dokončujeme tento tutoriál o Bezierových křivkách, klíčem je experimentování, pokud chceme dosáhnout komplexnějších efektů, které jsou připojeny k tomu, co potřebujeme.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

Vám pomůže rozvoji místa, sdílet stránku s přáteli

wave wave wave wave wave