logo

Začínáme s HTML plátnem

Moje přiznání:Před tímto článkem jsem nikdy nepoužil plátno.
Mám v hlavě skvělý nápad, který potřebuje plátno, tak proč nezdokumentovat své průzkumy pomocí HTML prvek plátna.

<canvas> je HTML prvek, který lze použít ke kreslení grafiky pomocí JavaScript .

Může dělat spoustu skvělých věcí, včetně;

  • Nakreslete tvary
  • Animace
  • Kombinovat fotografie
  • Uživatelské kresby

Dnes začneme prozkoumáním některých jeho základních možností.

Bude to vypadat takto:

Vytváření našeho prvního HTML plátna

K vytvoření našeho prvního plátna nepotřebujeme mnoho:

<canvas id="canvas">

Tím se vytvoří výchozí prvek plátna, což je 300 x 150 pixelů. Můžeme nastavit šířku a výšku prvku canvas nebo jej stylizovat pomocí CSS .

Nevypadá to moc, protože jsme na něm nic nevykreslili.

Vytváření našeho prvního tvaru na HTML Canvas

Abychom přidali náš první tvar, musíme nejprve použít JavaScript, abychom získali náš prvek plátna. 

const canvas = document.getElementById('canvas');

Nyní máme náš skutečný prvek plátna, musíme specifikovat jeho kontext:

const ctx = canvas.getContext('2d');

Dobře, přidáme čtverec, možná? 

ctx.fillRect(50, 50, 100, 100);

Parametry, které posíláme, jsou následující (x, y, šířka, výška).

Super, takže teď vidíme náš první obdélník!

Jiné tvary

S plátnem můžeme vytvořit spoustu tvarů;

  • Obdélníky
  • Cesty
  • Oblouky
  • Křivky (kvadratické a Bezierovy)

S tím můžeme vytvořit jakýkoli tvar. Zde je několik příkladů:

Kruh na plátně

// Cirlce
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

Parametry pro oblouk jsou (x, y, Poloměr, počáteční úhel, koncový úhel)

Trojúhelník plátna

// Triangle
ctx.beginPath();
ctx.moveTo(200, 75);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();

Pokud jde o argument přesun, akceptuje souřadnice (x, y).
A řádekTo (x, y) odkud je vždy nastaven moveTo.

Srdce na plátně

// Hearth
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();

BezierCurveTo přijímá (x kontrolního bodu 1, y kontrolního bodu 1, x kontrolního bodu 2, y kontrolního bodu 2, x končí, y končí)

Najdete je na následujícím Codepen.

Podpora prohlížeče

Prvek plátna je v dnešní době dobře podporován a je rozhodně dobrou volbou, pokud chcete kreslit vektory na obrazovku.

Děkujeme za přečtení a pojďme se spojit!

Děkuji, že čtete můj blog. Neváhejte se přihlásit k odběru mého e-mailového zpravodaje a připojte se na Facebooku nebo Twitteru