Kezdjük a HTML vászonokkal

Sep 17, 2025
kézikönyv

A html & lt; vászon & gt; Az elem egy erőteljes megoldás a pixel alapú grafika létrehozásához az interneten JavaScript , és lehetővé teszi, hogy néhány figyelemre méltó hatásokat hozzon létre egy kis gyakorlatra.

Ebben a bemutatóban megnézzük a vászon objektum létrehozását, egyszerű képeket rajzolunk rajta, és a vizuálisok animálására.

01. Hozzon létre egy oldalt

A vászon alapvetően egy HTML elem, amelyet az oldalon helyez el, a skála, amely lefedi a kívánt területet, és ezután felhívhatja. Az induláshoz létre kell hoznunk egy egyszerű oldalt egy vászonobjektummal. 

 & lt;! Html & gt doctype;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta Charset = 'UTF-8' / & gt;
  & lt; Cím & gt; html vászon demo & lt; / cím & gt;
  & link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "canvas.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; test & gt;
  & lt; vászonazonosító = "html-vászon" & gt;
  & lt; / test & gt;
& lt; / html & gt;

02. Méretezze a vászonot

Ha rengeteg helyet szeretne játszani, azt szeretnénk, ha a vászonunk kitölti az egész képernyőt. Azt is adunk egy fekete háttér, így tudod, hogy ez határozottan ott van. Ez valójában egy kicsit trükkös lehet, anélkül, hogy görgetősávokat vagy fehér helyet végezne. Az alábbi CSS-nek gondoskodnia kell róla. 

 vászon {
  Magasság: 100VH;
  Szélesség: 100VW;
  Pozíció: abszolút;
  Háttérszín: # 000000;
}
  Margó: 0;
  Padding: 0;
}

03. A vászon inicializálása

Ezután hozzá kell adnunk néhány JavaScriptet a használni kívánt vászon beállításához. A DOMCONTENTULTED EVENT-ot összekapcsoljuk, hogy a parancsfájl ne próbálja meg futtatni, mielőtt a vászonelem készen áll. Azt is meg kell állapítanunk, hogy a vászon felbontás megfeleljen az általa fedett területnek - ellenkező esetben a vászon növelné a felbontást, ami elmosódott vagy pixellált grafikákhoz vezet. 

 ​​Dokumentum.addeventlistener ("DOMCONTENTOMED", funkció () {
  var coras = document.getelementbyid ("html-vászon");
  var körök = [];
  VAR RADIUS = 50;
  vavas.width = vászon.clientwidth;
  vászon.height = canvas.clientHeight;
  var-kontextus = vasas.getcontext ("2D");
}, FALSE);

04. Rajzoljon egy alakot

Észre fogod venni, hogy az utolsó lépésben valamit "kontextusnak" neveztünk. Így fordul elő a vászonra. A legegyszerűbb gondolkodni a kontextusra, mint egy ecset, amelyet különböző vonalakat, íveket és alapformákat használhatunk.

Amit most megtehetünk, az a kontextusunkat, hogy használjon egy vonórekő funkciót, amely 360 fokos ívet hoz létre - azaz egy kör. Ezt úgy tesszük, hogy elmondjuk a kontextusnak az ív meghatározását, a határokat a határ és a kitöltéshez, majd emelje fel a töltés () és a stroke () funkciókat, hogy ténylegesen felhívja az alakot (a stroke felhívja a határt). 

 ​​Funkcióhúzó (x, y, sugar, határ, border_colour, fill_colour)
  {
  kontextus.beginpath ();
  kontextus.arc (x, y, sugarú, 0,2 * math.pi);
  kontextus.strokestyle = border_colour;
  kontextus.Fillstyle = fill_colour;
  kontextus.Linewidth = határ;
  kontextus.Closepath ();
  kontextus.fill ();
  kontextus.Stroke ();
  }

05. Sok kör létrehozása

Nagy. Van egy funkció, amely körvonalakat vonhat. Most van szükségünk valamire. Húzzuk meg a kódot a 3. lépésben, hogy létrehozzunk egy tömböt, amely leírja a kör objektumokat. Az egyes körök X és Y koordinátjait, színét és irányát tárolja.

Ezt a tömbstruktúrát, nem pedig csak átrajzoljuk a köröket, mert lehetővé teszik számunkra, hogy a köröket a tömb tartalmának újra áthúzzuk. 

 ​​a (var i = 0, én & lt; 20, i ++) {
  var x = sugar + (Math.Random () * (vasas.width - (2 * sugar)));
  var y = sugar + (Math.Random () * (vavas.height - (2 * sugar)));
  var color = randomcolour ();
  var irány = Math.Random () * 2.0 * Math.pi;
  körök.push ({x: x, y: y, szín: szín, irány: irány});
  húz(); }

06. Véletlenszerű a szín

Az utolsó lépésben néhány új funkciót használtunk, amelyeket még nem határoztak meg. Kezdjük véletlenszerűen (). Ez lesz olyan segédprogram, amely egy színeket ábrázoló randomizált hexadecimális karakterláncot ad vissza. Ez meglehetősen egyszerű ahhoz, hogy megvalósítsa. 

 ​​Funkció VéletlenColour () {
  var chars = '0123456789abcdef';
  var color = '#';
  (var i = 0; i & lt; 6; i ++) {
  Color + = Chars [Math.Floor (Math.Random () * 16)];
  }
  visszatérési szín; }

07. Rajzolja le a grafikát az oldalon

Most készen állunk arra, hogy a rajzokat a rajz () függvény végrehajtásával hozzuk létre. Ez két kulcsot fog tenni. Először is törli a vászonot a ClearRect () funkció használatával. Ez akkor fontos lesz, amikor animáljuk a köröket, hogy elkerüljék az új keret rajzolását a régi tetején. Ezután idézi át a tömbön keresztül, és mindegyik kört a vászonra húzzuk a vászonra, vonzati funkciónk segítségével. 

 ​​Funkció rajz () {
  kontextus.Contrect (0, 0, vászon.Hát, vászon.height);
  körök.Forforeach (funkció (kör) {
  húzózik (kör.x, kör, kör, sugár, 5, kör.colour, kör.colour);
    }); }

08. Ami a formákat

Ha most kipróbálod, látni fogsz néhány statikus köröket az oldalon. De szeretnénk animálni őket. Ehhez többféle módon kell meghosszabbítani () függvényünket. Először is használjuk a köret.

Ezután fogjuk használni a beépített függvény az úgynevezett requestAnimationFrame hogy rekurzívan meghívja a sorsolás () függvényt. requestAnimationFrame lehetővé teszi a böngésző, hogy mikor hívja a funkció újra, így nem kell végrehajtani időzítő kiszámolni, hogy felhívja a következő képkockára. 

 ​​Funkció rajz () {
  kontextus.Contrect (0, 0, vászon.Hát, vászon.height);
  körök.Forforeach (funkció (kör) {
  kör.x = circle.x + math.cos (kör.Direction);
  circle.y = circle.y + math.sin (kör.Direction);
  húzózik (kör.x, kör, kör, sugár, 5, kör.colour, kör.colour);
  });
  kérdőíves (rajz);
  }

09. ugrál az oldal szélén

Még mindig hiányzik egy dolog. A körök most csak eltűnnek a képernyő szélén. Tedd vissza őket. Ehhez hozzáadunk egy hívást egy új funkcióhoz, ugrál (kör), a rajz () funkció foreach hurokjában.

A Bounce funkció meg fogja határozni, ha egy kör a képernyő szélén van, és megfelelően állítsa be az irányértékét. 

 ​​Funkció Bounce (kör) {
  Ha ((kör.x-sugar) & lt; 0) || ((kör.y - sugarú) & lt; 0) || ((kör.x + sugár) & gt; vászon.Hát) || ((kör. Y + sugar) & gt; vászon.height)))) {
  kör.Direction + = (math.pi / 2);
  }
  ha (kör.Direction & gt; (2 * math.pi)) {
  circle.direction - = (2 * math.pi);
  }
}

Ez a cikk eredetileg megjelent Web designer 266. kiadás. Vásárolja meg itt.

Kapcsolódó cikkek:

  • Hozzon létre egy digitális etch egy vázlatot a vászon segítségével
  • Minden, amit tudnod kell az új node.js 8-ról
  • Hogyan kell exportálni a hatások animációkat a HTML5-hez

kézikönyv - Most Popular Articles

44 a legjobb iPad parancsikonok és gesztusok iPados 2020

kézikönyv Sep 17, 2025

(Kép hitel: jövő) UGORJ: Alapvető parancsikonok Interf�..

Hogyan Photoshop az iPhone-on (igen, ez egy dolog)

kézikönyv Sep 17, 2025

(Kép hitel: Jason Parnell-Brookes) UGORJ: Photoshop Express ..

Hogyan készítsünk egy digitális olajfestményt az Artrage alkalmazással

kézikönyv Sep 17, 2025

Festés digitálisan a Rajzolaj tabletta és rajzolt szoftver Artrage. A grafikus tabletta vagy a mobileszközön ..

Az állati szemek illusztrálása

kézikönyv Sep 17, 2025

(Kép hitel: Jill Tisbury) A tanulás során Hogyan kell felhívni az állatokat , az egyik trükkös ..

Hozzon létre egy egyszerű színtáblázat

kézikönyv Sep 17, 2025

Megragadja a fogantyút színelmélet egy kicsit túlságosan túl sok, mint a tanulás matematika vagy tudomány. Úgy érzi, hogy csak kreatív és kifejezni magát, nem dolg..

Építsen egy animált osztott képernyő céloldalt

kézikönyv Sep 17, 2025

A céloldala kulcsfontosságú elem az Ön számára honlap elrendezés . Ez az első igazi lehetőség, hogy be k..

Hogyan keverjük össze az árnyék színét a festékben

kézikönyv Sep 17, 2025

Vannak, akik az árnyékok trükkös keverését találják, gyakran megpróbálnak teljesen új színt összekeverni. Sajnos az ..

A Pro Útmutató 3D-s textúrák létrehozásához

kézikönyv Sep 17, 2025

Öt kiemelkedő művész mutatja a kereskedelmük trükkjeit, elmagyarázva, hogyan lehet a városi, sci-fi, természetes, stiliz..

Kategóriák