bezierCurveTo - metoda objektu CanvasCtx
Popis:
Metoda přidá další bod pro dráhu Bezierovy kubické křivky. Kubická Bézierova křivka vyžaduje tři body. První dva body jsou kontrolní body, které jsou použity v kubickém Bézierově výpočtu a poslední bod je koncový. Výchozím bodem pro křivky je poslední zadaný bod. Pokud bod neexistuje, pak se použije metoda
beginPath() a
moveTo() pro definování počátečního bodu.
Syntaxe:
Object bezierCurveTo(Long cp1x, Long cp1y, Long cp2x, Long cp2y, Long x, Long y)
Parametry:
cp1x | (Long) x-ová souřadnice prvního bodu Bézierovy křivky |
cp1y | (Long) y-ová souřadnice prvního bodu Bézierovy křivky |
cp2x | (Long) x-ová souřadnice druhého bodu Bézierovy křivky |
cp2y | (Long) y-ová souřadnice druhého bodu Bézierovy křivky |
x | (Long) x-ová souřadnice koncového bodu |
y | (Long) y-ová souřadnice koncového bodu |
---|
Poznámka:
Metoda vytváří cestu (
path). Proto před voláním této metody by se měla volat metoda
beginPath. Pro skutečné kreslení se nakonec volá metoda
stroke nebo
fill.
Příklad1:
Proměná
ctx reprezentuje kreslící plochu (
CanvasCtx). Ta se nastaví v kartě "
Draw" na začátku skriptu kreslící události
onDraw následovně:
var ctx =
pEvent.
GetCtx(1);
JavaScriptVyber a zkopíruj do schránky
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();
Příklad2:
JavaScriptVyber a zkopíruj do schránky
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.stroke();