HTML Canvas - je to výkonný nástroj, který umožňuje vytvářet různé grafické prvky na webové stránce. Jedním ze základních prvků, které lze kreslit na plátno Canvas, je linie. Čáry se používají k vytváření obrysů tvarů, překrývání hranic a dekorativních efektů.
Chcete-li nakreslit čáru v HTML Canvas, musíte použít některé vlastnosti a metody JavaScriptu. Nejprve je nutné získat přístup k prvku Canvas na webové stránce a poté použít techniky kreslení kontextu k vytvoření čar různých délek a tloušťek.
CanvasRenderingContext2D - je to objekt, který představuje kontext kreslení pro plátno Canvas. S ním je možné přizpůsobit všechny vlastnosti linky, jako je barva, Tloušťka a styl. Poté lze použít kontextové metody, jako jsou beginPath(), moveTo() a lineTo() Chcete-li určit počáteční a koncový bod čáry a poté jej nakreslit pomocí metody stroke().
Metody kreslení čar
V HTML Canvas existují různé metody pro kreslení čar. Zde jsou některé z nich:
- stroke() : metoda stroke() se používá k zobrazení čáry, která byla nakreslena tečkami pomocí metody moveTo () a lineTo (). Po použití metody stroke () bude čára nakreslena na plátno.
- lineTo (): metoda lineTo () se používá k určení koncového bodu čáry. Přijímá dva argumenty-souřadnice X a Y koncového bodu.
- moveTo (): metoda moveTo () se používá k pohybu aktuálního bodu na plátně bez kreslení čáry. Přijímá dva argumenty-souřadnice X a Y nového bodu.
- lineWidth: vlastnost lineWidth určuje tloušťku čáry, která bude nakreslena na plátně. Hodnota musí být kladné číslo. Výchozí hodnota je 1.
- lineCap : vlastnost lineCap určuje styl konců čáry. Existují tři možné hodnoty: butt (výchozí je jednoduše přímý konec), round (zaoblený konec) a square (čtvercový konec).
To jsou jen některé z metod a vlastností, které lze použít při kreslení čar v HTML Canvas. Pomocí jejich kombinací můžete na plátně vytvářet různé tvary a tvary.
Přímka
V HTML Canvas lze pomocí metody nakreslit přímku lineTo(). Tato metoda umožňuje určit konečné souřadnice čáry na plátně.
Než začnete kreslit, musíte nejprve určit kontext plátna pomocí metody getContext(). Pak můžete zavolat metodu beginPath() začít novou cestu.
Poté můžete pomocí metody nastavit počáteční souřadnice čáry moveTo(). Poté pomocí metody lineTo() lze určit konečné souřadnice.
Chcete-li například nakreslit jednoduchou vodorovnou čáru, můžete použít následující kód:
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 50); ctx.lineTo(200, 50); ctx.stroke();
V tomto příkladu jsou počáteční souřadnice čáry nastaveny na (0, 50) a konečné souřadnice na (200, 50). Metoda stroke() používá se k zobrazení čáry na plátně.
Lze také změnit barvu a tloušťku čáry pomocí vlastností strokeStyle a lineWidth. Například pro nastavení červené barvy a tloušťky 2 pixelů lze použít následující kód:
ctx.strokeStyle = 'red'; ctx.lineWidth = 2;
To vám umožní zobrazit červenou čáru o tloušťce 2 Pixelů.
Tedy pomocí metody lineTo() a vlastnosti strokeStyle a lineWidth na plátno HTML Canvas lze snadno nakreslit rovné čáry.
Křivka
HTML Canvas umožňuje kreslit nejen rovné čáry, ale také křivky. K tomu se používá metoda quadraticCurveTo () nebo bezierCurveTo ().
Metoda quadraticCurveTo () se používá k kreslení parabolických křivek. Bere tři argumenty: kontrolní bod na ose X, kontrolní bod na ose Y a koncový bod. Příklad použití:
- context.quadraticCurveTo(200, 100, 400, 200);
Metoda bezierCurveTo () se používá k kreslení kubických křivek. Má šest argumentů: dva kontrolní body na ose X a Y a koncový bod. Příklad použití:
- context.bezierCurveTo(200, 100, 300, 200, 400, 100);
Obě metody se provádějí po vyvolání metody beginpath() a před vyvoláním metody stroke () nebo fill ().
Křivky čáry dodávají kresbám na HTML Canvas flexibilitu a originalitu. To vám umožní vytvořit hladké a elegantní křivky, které lze použít k vytvoření vizuálních efektů nebo složitých tvarů.
Úseky s plynulými přechody
HTML Canvas poskytuje různé možnosti pro vytváření grafických prvků, včetně kreslení čar. Někdy je však nutné vytvořit úsek s plynulými přechody barev nebo tloušťky. V této části se podíváme, jak to lze udělat.
Pro vytvoření úseku s plynulými přechody můžeme použít funkci createLinearGradient(). Tato funkce vytváří přechod, který lze použít k vyplnění grafických objektů, včetně čar.
Příklad kódu níže ukazuje, jak vytvořit úsek s plynulými přechody:
const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');const gradient = ctx.createLinearGradient(0, 0, 200, 0);gradient.addColorStop(0, 'red');gradient.addColorStop(0.5, 'yellow');gradient.addColorStop(1, 'green');ctx.strokeStyle = gradient;ctx.lineWidth = 10;ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(250, 50);ctx.stroke();Ve výše uvedeném příkladu vytvoříme horizontální gradient, který začíná červenou barvou, poté plynule přechází do žluté a zelené. Tento přechod pak aplikujeme jako barvu tahu naší čáry.
Můžete také vytvořit vertikální gradient změnou hodnot parametrů createLinearGradient(). Vše, co musíte udělat, je změnit hodnoty počátečních a koncových souřadnic přechodu.
Vytváření úseků s plynulými barevnými přechody nebo tloušťkou v HTML Canvas lze tedy dosáhnout pomocí funkce createLinearGradient(). Použijte tuto metodu k přidání krásy a zájmu o vaše grafické projekty.
Tečkovaná čára
Pro kreslení tečkovaných čar v HTML Canvas lze použít kombinaci úseků čar a přeskočení. To lze provést pomocí vlastností kreslicího kontextu lineDash a lineDashOffset.
Nejprve je třeba nastavit pole hodnot lineDash, který určí délku úseků a průchodů. K vytvoření tečkované čáry s dlouhými úseky a krátkými průchody lze například použít následující pole: [10, 5] . První prvek pole určuje délku úsečky a druhý průchodnost.
Pak je třeba nastavit hodnotu lineDashOffset, který určuje Posun začátku tečkované čáry. Pokud například chcete začít tečkovanou čáru přeskočením, nikoli úsekem, můžete nastavit hodnotu lineDashOffset rovná se délka průchodu.
const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');ctx.lineWidth = 3;ctx.strokeStyle = 'black';ctx.setLineDash([10, 5]); // задаем массив значений lineDashctx.lineDashOffset = 5; // задаем значение lineDashOffsetctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(250, 50);ctx.stroke();V tomto příkladu vytvoříme tečkovanou čáru s dlouhými 10 pixelovými délkami a krátkými 5 pixelovými průchody. Začátek tečkované čáry je posunut o 5 pixelů.
Pomocí vlastností lineDash a lineDashOffset, lze snadno vytvořit tečkované čáry v HTML Canvas.