Začínáme s HTML Canvas

Feb 2, 2026
jak

Html JavaScript.

a umožní vám vytvořit některé pozoruhodné efekty s trochou praxe.

V tomto návodu se podíváme na vytvoření objektu plátna, kreslení jednoduchých vizuálů na něm a animovat tyto vizuály.

01. Vytvořte stránku

Canvas je zásadně prvkem HTML, který umístíte na stránce, měřítko pro pokrytí oblasti, kterou chcete, a pak můžete čerpat. Chcete-li začít, musíme vytvořit jednoduchou stránku s objektem plátna. 

 Doctype HTML & GT;
& lt; html & gt;
  & lt; hlava & gt;
  & lt, meta charset = 'utf-8' / gt;
  & lt, titul & gt; html canvas demo & lt; / titul & gt;
  & lt, link rel = 'styl styl' href = 'custom.css' / gt;
  & lt; scénář src = "canvas.js" & gt; & lt; / script & gt;
  & lt; / hlava & gt;
  & lt; tělo & gt;
  & lt; canvas id = "html-canvas" & gt;
  & lt; / tělo & gt;
& lt; / html & gt;

02. Měřítko plátna

Chcete-li nám dát spoustu místa hrát, chceme, aby naše plátno naplní celou obrazovku. Dáme to také černé pozadí, takže víte, že je to určitě tam. To může být skutečně trochu složitější, aniž by skončil s posuvníky nebo bílým prostorem. Níže uvedený CS by se měl postarat o to. 

 plátno {
  Výška: 100VH;
  šířka: 100vw;
  Pozice: absolutní;
  Barva pozadí: # 000000;
}
  marže: 0;
  Polstrování: 0;
}

03. Inicializujte plátno pro použití

Dále potřebujeme přidat nějaký JavaScript, který nastavit plátno připravené k použití. Budeme mít zavěšení události DomContentLloaded, aby se zajistilo, že skript se nepokouší spustit před provedením prvku plátna. Budeme také nastavit rozlišení plátna tak, aby odpovídalo oblasti, kterou pokrývá - jinak se plátno zmiře bez zvyšování rozlišení, což vede k rozmazané nebo pixelované grafice. 

 ​​Document.addeventListener ("DomContentLoaded", funkce () {
  var canvas = dokument.getElementbyid ("html-canvas");
  var kruhy = [];
  var poloměru = 50;
  canvas.width = canvas.Clientwidth;
  canvas.Height = plátno.ClientHeight;
  var kontext = canvas.getContext ("2d");
}, false);

04. Nakreslete tvar

Všimnete si, že v posledním kroku jsme si přálili něco nazvaného "kontext". To je, jak nastane výkres na plátně. Je nejjednodušší myslet na kontext jako štětec, který můžeme použít k čerpání různých linií, oblouků a základních tvarů.

To, co nyní můžeme udělat, je dát náš kontext, který bude používat psaní funkce drawcircle, která vytvoří oblouk 360 stupňů - to je kruh. Děláme to tím, že řeknete kontextu definovat oblouk, nastavit styly pro hranici a vyplnění, pak vzrůstá funkce výplň () a zdvih (), abyste mohli skutečně nakreslit tvar (zdvih přitahuje ohraničení). 

 ​​Funkční drawcircle (X, Y, Radius, Border, Border_Colour, Fill_Colour)
  {
  kontext.beginhpath ();
  kontext.Arc (x, y, poloměr, 0,2 * math.pi);
  kontext.strokestyle = border_colour;
  kontext.fillStyle = fill_colour;
  kontext.Linewidth = hranice;
  kontext.ClosePath ();
  kontext.Fill ();
  kontext.stroke ();
  }

05. Vytvořte mnoho kruhů

Skvělý. Máme funkci, která může kroužit kruhy. Nyní potřebujeme něco k čerpání. Rozšiřme kód z kroku 3 a vytvořte pole popisující kruh objekty. Bude ukládat koordináty X a Y X a Y, barvu a hodnotu směru.

Vytváříme tuto strukturu pole spíše než jen kreslicí kruhy hned, protože nám umožní oživit kruhy tím, že znovu vypracují obsah pole později. 

 ​​pro (var i = 0; i

06. Randomise Barva

V posledním kroku jsme použili několik nových funkcí, které ještě nebyly definovány. Začněme s randomcolour (). To bude užitná funkce, která vrátí randomizovaný hexadecimální řetězec představující barvu. Je poměrně jednoduché k realizaci. 

 ​​Funkce RandomColour () {
  var chars = '0123456789Abcdef';
  var color = '#';
  pro (var i = 0; i

07. Nakreslete grafiku na stránce

Teď jsme připraveni přinést věci společně implementací funkce Draw (). To bude dělat dvě klíčové věci. Za prvé vymaže plátno pomocí funkce ClearRect (). To bude důležité, když přijdeme na oživení našich kruhů, abyste se vyhnuli kreslení nového rámu přes vrchol staré. Poté se iteruje přes pole, které jsme postavili a nakreslili každý kruh na plátně za sebou pomocí naší funkce DrawCircle. 

 ​​Funkce Draw () {
  kontext.Clearrect (0, 0, canvas.width, plátno.Height);
  Circles.foreach (funkce (kruh) {
  Drawcircle (Circle.x, Circle.y, poloměr, 5, Circle.Colour, Circle.Colour);
    }); }

08. Animovat tvary

Pokud to zkusíte teď, uvidíte některé statické kruhy namalované na stránce. Ale chceme je oživit. Chcete-li to udělat, musíme rozšířit funkci Draw () v několika způsoby. Za prvé, použijeme hodnotu Circle.direction, kterou jsme tlačili na pole pro výpočet změn v poloze X a Y pro kruh.

Dále použijeme vestavěnou funkci s názvem RequestanimationFrame, která rekurzivně volá funkci Draw (). ReceptSanimationFrame umožňuje prohlížeči rozhodnout, kdy znovu volat funkci, vyhnout se potřebu implementovat časovače pro výpočet kdy pro kreslení dalšího snímku. 

 ​​Funkce Draw () {
  kontext.Clearrect (0, 0, canvas.width, plátno.Height);
  Circles.foreach (funkce (kruh) {
  circle.x = circle.x + math.cos (kruh.direction);
  circle.y = circle.y + math.sin (kruh.direction);
  Drawcircle (Circle.x, Circle.y, poloměr, 5, Circle.Colour, Circle.Colour);
  });
  RequestanimationFrame (remíza);
  }

09. Odrazit na okraji stránky

Je tu ještě jedna věc stále chybí. Kruhy nyní zmizí z okraje obrazovky. Udělejme, aby se odrazili. Chcete-li to provést, přidáme volání na novou funkci, odraz (kruh), v rámci Formuádní smyčky funkce Draw ().

Funkce odrazu bude určovat, když je kruh na okraji obrazovky a odpovídajícím způsobem upravte jeho hodnotu. 

 ​​Funkce Bounce (kruh) {
  if ((((circle.x - poloměr) & lt; 0) || ((circle.y - poloměr) <0) || (circle.x + poloměr) & gt; canvas.width) || ((kruh. Y + RADIUS) & gt; canvas.height) {
  kruh.direction + = (math.pi / 2);
  }
  if (kruh.direction & gt; (2 * math.pi)) {
  kruh.direction - = (2 * math.pi);
  }
}

Tento článek se původně objevil Web Designer. Vydání 266. Kupte si to tady.

Související články:

  • Vytvořte digitální etch skicu pomocí plátna
  • Vše, co potřebujete vědět o nových node.js 8
  • Jak exportovat After Effects animace na html5

jak - Nejoblíbenější články

Jak nakreslit krk a ramena

jak Feb 2, 2026

Když se naučíte, jak nakreslit krk a ramena, může být často náročné ukázat svazky v naší práci, protože jsme zvyklí na pozorování lidí front-on. Ale kreslení anatomicky sp..

Jak vytvořit interiéry s Blenderovým Eevee

jak Feb 2, 2026

Atypique-studio: obsahuje textury z poliigon.com - textury nemusí být redistribuovány Když jsem začal pracovat n..

Vytvořit realistický fantasy rytíř

jak Feb 2, 2026

V této workshopu vám ukážeme, jak malovat rytíř Photoshop. , stejně jako malování s tradičními médii. ..

Jak vytvořit chlupaté kreslené postavičky

jak Feb 2, 2026

Strana 1 z 2: Strana 1 Strana 1 Stránka 2. Design postavy ..

Jak malovat panoráma s bloky barvy

jak Feb 2, 2026

Dech beroucí výhledy, ohromující panorama a krásné městské scraky dělají skvělé fotografie, ale mohou být poněkud s..

Úvod do testování předního financování

jak Feb 2, 2026

Strana 1 z 2: Různé typy frontendových testů (a kdy je používat) R�..

Udělejte typografický plakát pomocí Adobe InDesign

jak Feb 2, 2026

Adobe InDesign je skvělý program pro použití při navrhování všeho, co používá typ typu. Během této aplikace InDesign..

Jak udělat realistické sportovní auto činí

jak Feb 2, 2026

Za poslední roky jsem honoval své dovednosti v osvětlení a vykreslování, stejně jako některé další techniky s různým..

Kategorie