Protože HTML canvas je grafický nástroj, je samozřejmé, že nám umožňuje kreslit tvary. Můžeme kreslit nové tvary pomocí řady různých funkcí dostupných k použití prostřednictvím kontextu, který jsme nastavili. Pokud s HTML canvas teprve začínáte, začněte mým úvodním článkem.
V této příručce se budeme zabývat tím, jak vytvořit některé z nejzákladnějších tvarů pomocí HTML canvas – čtverce, obdélníky, kruhy a trojúhelníky.
Vytváření obdélníků a čtverců pomocí HTML Canvas
Čtverce a obdélníky lze snadno vytvořit v HTML5 Canvas. Existuje řada různých funkcí obdélníku, které můžeme použít k vytvoření
rect(x, y, width, height)- obrysy, kde by měl být obdélník nebo čtverec, ale nevyplňuje je.fillRect(x, y, width, height)- vytvoří obdélník a ihned jej vyplní.strokeRect(x, y, width, height)- vytvoří obdélník a okamžitě jej ohraničí tahem. Jak můžete vidět, všechny tyto funkce mají stejný formát - mají souřadnice x a y pro začátek a šířku a výšku v rámci plátna.
Podívejme se na několik příkladů v kódu.
Vymazat funkci obdélníku
Pokud se chcete dozvědět o clearRect, přečtěte si můj tutoriál o tom zde.
Použití rect() k vytvoření obdélníku
Pokud chceme pomocí rect() vytvořit obdélník a poté jej vyplnit a pohladit, musíme definovat fillStyle a strokeStyle. Například níže uvedený kód vytvoří obdélník začínající na (10, 10), o rozměrech 100x150, s pozadím #b668ff a 5px širokým bílým tahem:
Výsledek :
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 150);
ctx.fillStyle = '#b668ff';
ctx.strokeStyle = 'white';
ctx.lineWidth = 5;
ctx.fill();
ctx.stroke();
Použití fillRect() k vytvoření obdélníku
fillRect nám umožňuje vytvořit obdélník a automaticky jej vyplnit konkrétní barvou. To znamená, že nemusíme používat fill() samostatně.
Například následující vyplní obdélník stejné velikosti jako předtím s pozadím #b668ff:
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);
Výsledek :
Použití strokeRect() k vytvoření obdélníku
strokeRect() má podobný formát, pouze vytvoří obdélník, který se automaticky vytáhne. Například níže uvedený kód vytvoří obdélník se stejnými rozměry a pozicí jako předtím, s 5px širokým okrajem/tahem #b668ff:
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeStyle = '#b668ff';
ctx.lineWidth = 5;
ctx.strokeRect(10, 10, 100, 150);
Výsledek :
Vytváření kruhů v HTML Canvas
Nejjednodušší způsob, jak vytvořit kruh v HTML Canvas, je použít arc funkce. Oblouk však nemusí nakreslit celý kruh – může nakreslit pouze část kruhu změnou počátečního a koncového úhlu. Podívejme se na syntaxi ctx.arc a na to, jak vytvořit kruh.
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise?)
x- odkazuje na souřadnici x středu kružnice.y- odkazuje na souřadnici y středu kružnice.radius- poloměr oblouku, který kreslíme.startAngle- úhel, ve kterém oblouk začíná (v radiánech).endAngle- úhel, pod kterým oblouk končí (v radiánech).counterClockwise- zda jde úhel proti směru hodinových ručiček (výchozí hodnota je nepravda, lze ji nastavit na hodnotu true).
Pokud nastavíme naše startAngle na 0 Radians , začne na pravé straně středu kruhu. Kruh je 2π radians v průměru. Pokud chceme nakreslit celý kruh, náš počáteční úhel je 0 a náš koncový úhel je 2π .
Můžeme to reprezentovat v kódu pomocí Math.PI * 2 . Zde je náš kód pro nakreslení kruhu se 4px širokým tahem v #b668ff, s poloměrem 90px , kde jeho střed je (100, 100):
let canvas = document.getElementById('canvas4');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 100, 0, Math.PI * 2, false);
ctx.strokeStyle = '#b668ff';
ctx.lineWidth = 4;
ctx.stroke();
Výsledek :
Vytváření půlkruhů pomocí HTML Canvas
Protože můžeme použít oblouk k nakreslení kružnic a upravit náš koncový úhel, můžeme jej použít také k nakreslení půlkruhu. Protože celý kruh má průměr 2π, půlkruh má pouze 1π radiánů. Jediný krok navíc, který zde musíme udělat, je nakreslit čáru z konce našeho půlkruhu zpět na začátek.
Protože skončíme na (10, 100) - protože náš poloměr je 90px, nakreslíme čáru pomocí funkce lineTo zpět k našemu výchozímu bodu, což je (190, 100).
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.arc(100, 100, 90, 0, Math.PI * 1, false);
ctx.lineTo(190, 100);
ctx.fillStyle = '#b668ff';
ctx.fill();
Výsledek :
Náš půlkruh můžeme otočit změnou možnosti proti směru hodinových ručiček na true:
ctx.arc(100, 100, 90, 0, Math.PI * 1, true);
Výsledek :
Vytváření oválů pomocí HTML Canvas
Ovál můžeme nakreslit na plátno HTML5 pomocí funkce ellipse(). Funguje velmi podobně jako arc(), až na to, že máme dvě možnosti poloměru.
ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterClockwise?)
x- odkazuje na souřadnici x středu kružnice.y- odkazuje na souřadnici y středu kružnice.radiusX- poloměr podél osy X oblouku, který kreslíme.radiusY- poloměr podél osy Y oblouku, který kreslíme.rotation- jak moc si přejeme otočit tvar naší elipsy v radiánech.startAngle- úhel, ve kterém oblouk začíná (v radiánech).endAngle- úhel, pod kterým oblouk končí (v radiánech).counterClockwise- zda jde úhel proti směru hodinových ručiček (výchozí hodnota je nepravda, lze ji nastavit na hodnotu true).
Zde je příklad s použitím stejných konceptů jako dříve s arc() :
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.ellipse(100, 60, 90, 60, 0, 0, Math.PI * 2, false);
ctx.fillStyle = '#b668ff';
ctx.fill();
Výsledek :
Vytváření trojúhelníkových tvarů pomocí HTML Canvas
V Javascriptu není vestavěná funkce trojúhelníku, takže místo toho musíme použít funkce lineTo a moveTo. Všechny tyto funkce jsou kreslení čar v kontextu ke konkrétním bodům.
Používáme moveTo určit počáteční polohu našeho trojúhelníku a poté nakreslit čáry podle potřeby, abyste nakreslili tvar trojúhelníku, který chceme. Zde je příklad, kdy nakreslíme trojúhelník a vyplníme ho #b668ff.
let canvas = document.getElementById('canvas8');
let ctx = canvas.getContext('2d');
ctx.moveTo(20, 0);
ctx.lineTo(40, 30);
ctx.lineTo(0, 30);
ctx.lineTo(20, 0);
ctx.fillStyle = '#b668ff';
ctx.fill();
Výsledek :
- Začneme tím, že pomocí moveTo určíme počáteční bod našeho trojúhelníku.
- Potom nakreslíme čáru od (20, 0) do (40, 30) – tj. 20 pixelů doprava a 30 pixelů dolů od našeho výchozího bodu.
- Protože tento trojúhelník bude symetrický, nakreslíme 20 pixelů doleva a 30 pixelů dolů, tj. (0, 30).
- Nakonec spojíme svůj tvar nakreslením čáry zpět k našemu výchozímu bodu, kterým byl (20, 0).
- Pak jej vyplníme a máme trojúhelník.
lineTo() funkci lze použít ke kreslení mnoha složitějších tvarů v HTML Canvas, které nejsou ve výchozím nastavení zabudovány. Všechny vlastní polygony budou používat lineTo , jako jsou šestiúhelníky, osmiúhelníky nebo dokonce rovnoběžníky.
Závěr
V této příručce jsme se zabývali tím, jak vytvořit některé jednoduché tvary na plátně HTML:čtverce, obdélníky, kruhy a trojúhelníky. Také jsme se dotkli skutečnosti, že lineTo lze použít k nakreslení čáry kdekoli na našem plátně, což nám umožňuje vytvářet složitější tvary, jako jsou šestiúhelníky a osmiúhelníky. Doufám, že se vám tento článek líbil.