Így esőkód - Matrix stílus

Bevezetés a HTML 5 vászonanimációkba

A HTML 5 általunk elhozott nagyszerű dolgok közül a vászon elemet szeretem a legjobban. Remélem, hogy ha meglátja, milyen hatalmas, akkor érdemes időt szánnia arra, hogy saját maga sajátítsa el a vászonanimációkat.

Mi az a vászon?

A vászon pontosan az, amire a neve utal. Ez egy üres vászon, amelyet tetszés szerint festhet, majd képként megjeleníthet a böngészőben. Az igazi szépség az, hogy nem csak képeket hozhat létre, hanem folyamatosan újrarajzolhatja és renderelheti őket - ezáltal animációt hozhat létre.

A vászon erejét csak a képzelete korlátozza. A vászon elem segítségével mindent létrehoztam a statikus képekről a menet közben, a játékokig, a grafikus felhasználói felületekig. és még egy MailChimp-stílusú e-mail készítő is. Akár 3D-ben is megjelenítheti a vásznat!

Számomra a vászon elem mindent megváltoztatott. Már nem korlátozódtam az alapértelmezett HTML-címkék használatára. Mindent létrehozhattam, amit akartam a böngészőben. És jobban hiszed, hogy ez teljesen új szintre emelte a JavaScript-ismereteimet.

Elkezdeni

Ahelyett, hogy bemutatnám, hogyan lehet egyszerűen vászonra rajzolni, bepillantást akarok adni abba, hogy mit hozhat létre vele. Ha még nem látta a Mátrixot, hagyja abba az olvasást, és nézze meg. Ha látta, akkor felismeri a híres „eső kódot” a címből. Alkossuk ezt vászonnal!

Ahelyett, hogy lépésről lépésre bemutatnám az időt, időmegtakarítás érdekében felteszem az alábbi kódot, és végigvezetek benneteket, elmagyarázva, hogy az egyes darabok mit csinálnak, miközben haladunk.

A HTML:

A CSS:

body{ background-color:#d2d2d2;}#canvas{ background-color:#000; display:block; margin:auto;}#logo{ display:none;}

A JavaScript:

var canvas = document.getElementById(‘canvas’);var ctx = canvas.getContext(‘2d’);var t = text();var logo = document.getElementById(‘logo’);var lines = [];window.setInterval(draw, 100);
function draw() { if (Math.floor(Math.random() * 2) === 0 && lines.length < 100) { lines.push(new textLine()); } ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(function(tl) {
 ctx.drawImage(tl.text, tl.posX, tl.animate(), 20, 1000); }); ctx.drawImage(logo, 100, 155, 400, 70);
}
function textLine() { this.text = t; this.posX = (function() { return Math.floor(Math.random() * canvas.width); })(); this.offsetY = -1000; this.animate = function() { if (this.offsetY >= 0) { this.offsetY = -1000; } this.offsetY += 10; return this.offsetY; };}
function text() { var offscreenCanvas = document.createElement(‘canvas’); offscreenCanvas.width = “30”; offscreenCanvas.height = “1000”; offscreenCanvas.style.display = “none”; document.body.appendChild(offscreenCanvas); var octx = offscreenCanvas.getContext(‘2d’); octx.textAlign = “center”; octx.shadowColor = “lightgreen”; octx.shadowOffsetX = 2; octx.shadowOffsetY = -5; octx.shadowBlur = 1; octx.fillStyle = ‘darkgreen’; octx.textAlign = “left”; var step = 10; for (i = 0; i < 100; i++) { var charCode = 0; while (charCode < 60) { charCode = Math.floor(Math.random() * 100); } octx.fillText(String.fromCharCode(charCode), 0, step); step += 10; } return offscreenCanvas;}

Hogyan működik?

Az 1. sorban megragadjuk a vászon elemet az azonosítójával. Minden vászonelemnek megvan a maga kontextusa - egy felület a tartalmának manipulálására. Erre utal a 2. sor ctx változója.

Az animált háttér létrehozásához szükségünk lesz egy véletlenszerű szöveg függőleges vonalára, amelyet ezután többször átrajzolunk az X-tengelyre, és fokozatosan animáljuk az Y-tengelyre, hogy végső hatást kapjunk.

Mivel a szöveg mindig vízszintesen jelenik meg, a szöveget egy másik láthatatlan vásznon jelenítjük meg, és képként az eredeti vásznunkra rajzoljuk.

A 3. sorban a t változót a text () függvény eredményére állítjuk, amely generálja és visszaadja láthatatlan vászon elemünket.

Ebben a funkcióban létrehozunk egy új vásznat, beállítjuk annak szélességét és magasságát, és a megjelenítési tulajdonságot semmire sem állítjuk, hogy elrejtsük, majd hozzáfűzzük a dokumentum törzséhez. Ezután beállítjuk a rajzolni kívánt szöveg színét, árnyékát és eltolását.

A függőleges véletlenszerű karakterek előállításához hurkolunk és 100-szor új rajzot rajzolunk, és az egyes intervallumokon 10x-szel növekszünk az Y-tengelyen. Ahhoz, hogy egy random karakter használok Math.random () , hogy egy számot 60 és 100, majd alakítani egy karaktert String.fromCharCode ().

Ez függőleges szövegünket árnyékkal rajzolja meg, és a vásznat visszaadja a t változónak.

Az animációs hurok

A következő 3 kódsorban lekérem a FreeCodeCamp logót, kinyilvánítok egy tömböt, amely megtartja a hátteret alkotó külön sorokat, és az window.setInterval segítségével futtatom a milliszekundumonként a draw () függvényt.

A vászon animálásakor jó gyakorlat inkább az window.requestAnimationFrame () használatát használni , de úgy éreztem, hogy ez túl zavaró a kezdők számára, mivel kissé trükkös a képkockasebesség beállítása.

Az első dolog, amit a draw () függvény egy véletlen szám generálása 1 és 0 között. Ha a szám 0, és kevesebb, mint 100 egyedi szövegsor animálódik a háttérben, akkor egy új textLine () -t tol be a vonalakba .

A textLine () függvény egy olyan objektumot ad vissza, amely tartalmazza

  1. Az így kapott függőleges szöveg a t változóban maradt .
  2. Az eltolás összege, amelyet az X tengelyen megjelenítenek (véletlenszerűen generálják az objektum minden egyes példányára).
  3. A kezdeti -1000 képpont eltolás az Y tengelyen, amely közvetlenül a vászon fölé helyezi.
  4. Olyan animációs módszer, amely minden híváskor 10 képpontot ad hozzá az Y tengelyhez, és visszaadja az eredményt, amivel a szöveg lefelé mozog. Ha az Y-tengely eltolódása eléri a 0 értéket, akkor az folytonos animációt biztosítva -1000 képpontra áll vissza.

A vászon megtisztul, majd a draw () függvény végigvonul a sor tömb minden egyes szövegsorán, és felhívja azt a vászonra, az animációs módszerét hívva, valahányszor egy vonal húzódik lefelé.

Mivel minden sornak véletlenszerű eltolódása van az X tengelyen, és véletlenszerű időközönként új sort adunk hozzá, a szövegsorok különböző sebességgel esnek a vásznon, létrehozva az eső kód effektust!

Végül a FreeCodeCamp embléma rajzolódik ki a háttérben, és ez adja meg végső animációnkat.

Most hova?

Ha a vászon érdekli, akkor többet megtudhat róla a Mozilla Docs alkalmazásban.

Úgy tervezem, hogy létrehozok egy sor alapvető lépésről lépésre bemutatott oktatóanyagot, amelyek vászonanimációkban járnak, miközben találok rá időt.

Ha nem találta túl nehéznek a fenti kódot, és szeretne vele összeveszteni, íme néhány jó ötlet:

  1. Tegye dinamikussá a méreteket, hogy a vászon méretarányos legyen és folytassa az animációt, miközben átméretezi a böngészőt.
  2. Véletlenszerű karakterek generálása helyett ragadjon meg egy saját kódú fájlt a GitHub-ból, és animálja ezt inkább.
  3. Render your name in place of the FreeCodeCamp logo, and make it look like the Matrix poster.
  4. Instead of generating each line at random, bind a click event to the canvas and render a new line at the X coordinates of your mouse click.

I hope you enjoyed this intro, if you did feel free to check out some of the other articles that I’ve written.

Turning code to cash — How to make money as a Web Developer and live to tell the tale.

So you just learnt to code. You’re eager and anyone who can’t code thinks you’re a genius, word gets out and all of a…medium.comHow to write a jQuery like library in 71 lines of code — Learn about the DOM

JavaScript frameworks are all the rage. Chances are that any JavaScript related news feed you open will be littered…medium.com5 Things to Remember When You’re Learning to Program

Learning to program is challenging. Aside from choosing a language or setting up a development environment that you…medium.comHow I Became a Programmer. And When I Started Calling Myself One

I’ve wanted to start blogging about programming for months now and like so many others before me I set off full of…medium.comPreventative Programming — how fix to bugs before they happen

…and why Sherlock Holmes would have been a brilliant programmermedium.com