Začínáme s HTML Canvas

Sep 13, 2025
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

Sestavte prototypy s Adobe XD

jak Sep 13, 2025

(Image Credit: budoucnost) V současném webu a aplikaci design jsou často časy, kdy interakce neotevře zcela novo..

10 způsobů, jak vytvořit lepší charakter animace

jak Sep 13, 2025

S velikostí 3D průmyslu Rostoucí rok v roce, je to důležitější než kdy jindy, aby se ujistil, že vaše práce vyniká z davu. Bez ohledu na úroveň dovedností jako 3D umělec, exi..

Jak vytvořit blogování s Gatsby

jak Sep 13, 2025

Rámy, jako je reagovat, posílat pouze JavaScript na klienty, který se pak používá k vytvoření prvků na obrazovce. HTML, ..

Jak rychle skici ruce

jak Sep 13, 2025

Chcete-li nakreslit ruce, musíte se podívat kolem složitosti anatomie rukou a rozpoznat jednoduchá pravidla, která vám pomo..

10 Tipy pro modelování tvrdého povrchu

jak Sep 13, 2025

Tento obraz Brunel's Great Eastern Paní z roku 1858 je na trvalém zobrazení na novém muzeu ve výši 7 milionů liber v Brist..

Jak používat tvary směsi k animovat znaky

jak Sep 13, 2025

Při vybavení vašeho 3D modely Použití kostí může být velmi účinná, někdy tato metoda prostě není vhodná - a výrazy obličeje je jedním z těchto..

Vytvořit perspektivu tím, že deformuje vaše textury ve Photoshopu

jak Sep 13, 2025

Jsem pevný věřící, že byste neměli čistě spoléhat na software, abyste mohli dělat práci pro vás. Dobrý umělec by m..

Vytvořte jednoduché ilustrace pro web

jak Sep 13, 2025

Posadil jsem se, hrál nějakou hudbu, stmívali světla a otevřela svůj notebook. Měl jsem spoustu. Ve snaze předvolání in..

Kategorie