Gør det regn kode - Matrix Style

En introduktion til HTML 5 lærred animationer

Ud af alle de gode ting, HTML 5 bragte os, elsker jeg lærredselementet mest. Jeg håber, at når du først ser, hvor kraftig den er, vil du gerne bruge tid til at mestre lærredsanimationer selv.

Hvad er et lærred?

Et lærred er nøjagtigt hvad navnet antyder. Det er et tomt lærred, som du kan male, som du ønsker, og derefter gengive i din browser som et billede. Den virkelige skønhed er, at det ikke kun giver dig mulighed for at oprette billeder, men også kontinuerligt tegne og gengive dem - derved skabe en animation.

Lærredets kraft begrænses kun af din fantasi. Jeg har brugt lærredselementet til at skabe alt fra statiske billeder on-the-fly til spil, grafiske brugergrænseflader. og endda en e-mailbygger i MailChimp-stil. Du kan endda gengive lærredet i 3D!

For mig ændrede lærredselementet alt. Jeg var ikke længere begrænset til at bruge standard HTML-tags. Jeg kunne oprette alt, hvad jeg ønskede, i browseren. Og du må hellere tro, at dette skubbet mine JavaScript-færdigheder til et helt nyt niveau.

Kom godt i gang

I stedet for at demonstrere, hvordan man simpelthen tegner på et lærred, vil jeg give dig et glimt af, hvad du kan skabe med det. Hvis du ikke har set The Matrix endnu, skal du stoppe med at læse nu og se den. Hvis du har set det, genkender du den berømte “faldende kode” fra titlen. Lad os oprette dette med lærred!

I stedet for at lave en trinvis vejledning, for at spare tid, vil jeg sende koden nedenfor og gå igennem den og forklare, hvad hvert stykke gør, når vi bevæger os videre.

HTML:

CSS:

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

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;}

Hvordan virker det?

På linje nr. 1 griber vi lærredselementet efter dets id. Hvert lærredselement har sin egen kontekst - en grænseflade til at manipulere dets indhold. Dette er hvad ctx- variablen på linje 2 henviser til.

For at skabe den animerede baggrund har vi brug for en lodret linje med tilfældig tekst, som vi derefter tegner flere gange over X-aksen og animerer trinvist på Y-aksen for at give os sluteffekten.

Da tekst altid gengives vandret, gengiver vi teksten på et andet usynligt lærred og tegner den som et billede på vores originale lærred.

På linje # 3 indstiller vi variablen t til resultatet af teksten () -funktionen, der genererer og returnerer vores usynlige lærredselement.

I denne funktion opretter vi et nyt lærred, indstiller dets bredde og højde og indstiller dets displayegenskab til ingen for at skjule det og tilføjer det derefter til dokumentet. Derefter indstiller vi farve, skygge og forskydning for den tekst, som vi tegner.

For at generere lodrette tilfældige tegn sløjfer vi og tegner et nyt tilfældigt tegn 100 gange og forøger det med 10 pixel på Y-aksen på hvert interval. For at generere et tilfældigt tegn bruger jeg Math.random () til at få et tal mellem 60 og 100 og konverterer det derefter til et tegn ved hjælp af String.fromCharCode ().

Dette tegner vores lodrette tekst med en skygge og returnerer lærredet til variablen t.

Animationssløjfen

I løbet af de næste 3 linier med kode henter jeg FreeCodeCamp-logoet, erklærer et array, der holder de separate linjer, der udgør baggrunden, og bruger window.setInterval til at køre funktionen draw () hver 100 millisekunder.

Når du animerer et lærred, er det god praksis at bruge window.requestAnimationFrame (), men jeg følte, at dette er for forvirrende for begyndere, da det er lidt vanskeligt at indstille billedhastigheden.

Den første ting, som draw () -funktionen gør, er at generere et tilfældigt tal mellem 1 og 0. Hvis tallet er 0, og der er mindre end 100 individuelle tekstlinjer, der animeres i baggrunden, skubber det en ny textLine () ind i linjearrayet .

Funktionen textLine () returnerer et objekt, der indeholder

  1. Den resulterende lodrette tekst holdes i t- variablen.
  2. Forskydningsbeløbet, som det gengives på X-aksen (genereret tilfældigt på hver forekomst af objektet).
  3. En indledende forskydning på -1000 px på Y-aksen, som placerer den lige over lærredet.
  4. En animeret metode, der tilføjer 10 pixel til Y-aksen, hver gang den kaldes, og returnerer resultatet, så teksten bevæger sig nedad. Hvis Y-akseforskydningen når 0, nulstilles den til -1000 pixel, hvilket giver en kontinuerlig animation.

Lærredet er ryddet, og derefter draw () funktion sløjfer gennem hver linje af tekst i linjerne array og trækker det på lærredet kalde dens animere fremgangsmåde hver gang trækkes en linie til at bevæge den nedad.

Da hver linje har en tilfældig forskydning på X-aksen, og en ny linje tilføjes med tilfældige intervaller, falder tekstlinjerne med forskellige hastigheder på tværs af lærredet, hvilket skaber den regnende kodeeffekt!

Endelig er FreeCodeCamp-logoet trukket over baggrunden, hvilket giver os vores sidste animation.

Hvor hen nu?

Hvis lærred er noget, der interesserer dig, kan du lære mere om det i Mozilla Docs.

Jeg planlægger at oprette en række mere grundlæggende vejledninger trin for trin, der går gennem lærredeanimationer, når jeg finder tiden.

Hvis du ikke fandt ovenstående kode for vanskelig og gerne vil rode med det, er der et par seje ideer:

  1. Gør dimensionerne dynamiske, så lærredet skaleres og fortsætter med at animere, når du ændrer størrelsen på din browser.
  2. I stedet for tilfældigt at generere tegn, tag en fil af din egen kode fra GitHub og animer den i stedet.
  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-rammer er alle raseri. Chancerne er, at ethvert JavaScript-relateret nyhedsfeed, du åbner, bliver fyldt med… medium.com 5 ting at huske, når du lærer at programmere

At lære at programmere er udfordrende. Bortset fra at vælge et sprog eller oprette et udviklingsmiljø, som du ... medium.com Hvordan jeg blev programmør. Og da jeg begyndte at kalde mig selv

Jeg har ønsket at begynde at blogge om programmering i flere måneder nu, og som så mange andre før mig satte jeg af sted fuld af ... medium.com Forebyggende programmering - hvordan fikser jeg bugs før de sker

... og hvorfor Sherlock Holmes ville have været en strålende programmør medium.com