Kezdjük a HTML vászonokkal

Feb 3, 2026
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

A fej rajzolása: Teljes útmutató

kézikönyv Feb 3, 2026

(Kép hitel: Oliver Sin) Page 1 of 2: Hogyan kell felhívni a fejét különböző szögekb..

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

kézikönyv Feb 3, 2026

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

A GLITCH szöveg és képhatások létrehozása CSS-ben

kézikönyv Feb 3, 2026

Ebben a bemutatóban megmutatjuk, hogyan kell létrehozni a hibás szöveghatást. Különleges hatások és animációk segíthetnek a webhelyek kiemelkedése, ami azonnali hatást gyakorol ..

Hogyan lehet 2D karaktert hozni az élethez VR-ben

kézikönyv Feb 3, 2026

Ha követi a trendeket, nehéz kihagyni, hogy a VR egy másik ébredésen megy keresztül. Ez történt korábban, de ezúttal ki..

Hogyan ragadja meg a fényt olajokkal

kézikönyv Feb 3, 2026

A fény az, ami mindig inspirálja a festőket - függetlenül attól, hogy a nap ragyog-e az épület köveire, vagy egy virág ..

Hogyan kezdjük el a SASS-t

kézikönyv Feb 3, 2026

Sass Egy hatékony eszköz, amely sok funkciót hoz a többi programozási nyelvtől a CSS-be - mint például a funk..

Lenyűgöző tiltó textúrák létrehozása Blenderben

kézikönyv Feb 3, 2026

Page 1 of 2: 1 oldal 1 oldal 2. oldal ..

Hogyan vehetjük be a vektor logót 2D-ről 3D-re

kézikönyv Feb 3, 2026

Ebben a bemutatóban megnézzük, hogyan veheted fel a vektor-alapú logókat az Illustrator és a Photoshop-ból a Cinema 4D-be,..

Kategóriák