Een inleiding tot het werken met canvas

Vandaag zul je leren over een webtechnologie die bekend staat als Canvas en hoe het gerelateerd is aan het Document Object Model, gewoonlijk de DOM genoemd. Deze technologie is enorm krachtig omdat het webontwikkelaars in staat stelt HTML-elementen te openen en te wijzigen via het gebruik van JavaScript.

Nu vraag je je wellicht af waarom we ons zelfs met JavaScript moeten bemoeien. Simpel gezegd, HTML en JavaScript zijn onderling en onderling afhankelijk. Sommige HTML-componenten, zoals de canvas element, niets zijn zonder het gebruik van JavaScript. Wat is tenslotte een canvas als we er niet op kunnen tekenen?

Om het concept te vatten, dacht ik dat we samen een voorbeeldproject zouden kunnen uitvoeren waarin we een eenvoudig lachend gezicht proberen te tekenen. Dus laten we er direct in duiken.

Ermee beginnen

Maak eerst een nieuwe map om de bestanden van uw project te bewaren, en ga dan verder en open uw favoriete teksteditor of webontwikkelingstool. Zodra je dit hebt gedaan, moet je een lege maken index.html en een leeg script.js, die we zullen blijven bewerken als we verder gaan.

Vervolgens gaan we verder met het wijzigen van onze index.html, dat zou niet lang moeten duren, omdat het grootste deel van ons project in JavaScript wordt geschreven. Alles wat we in onze HTML moeten doen, is een canvaselement en referentie maken script.js. Het is vrij eenvoudig:

Dus om het uit te leggen, heb ik een set tags voor beide gebruikt  en , en dus kunnen we via het lichaam meer elementen aan ons document toevoegen. Ik grijp deze kans en doe precies dat met een canvaselement van 640 bij 480 met het attribuut id = 'canvas'.

Dit kenmerk voegt eenvoudigweg een tekenreeks toe aan een element voor identificatie, en we zullen het later gebruiken om ons canvaselement in ons JavaScript-bestand te vinden. Ik heb toen verwezen naar ons JavaScript-bestand met behulp van de > tag, waarin ik JavaScript heb opgegeven als het type taal en script.js als het pad naar ons gewenste bestand.

Het manipuleren van de DOM

Zoals de naam Document Object Model al aangeeft, moeten we een interface gebruiken voor het HTML-document door een andere taal te gebruiken, in dit geval JavaScript. Hiervoor hebben we een korte introductie van het ingebouwde documentobject nodig. Dit object komt direct overeen met onze tags, en op dezelfde manier is het de basis van ons hele project, omdat we het kunnen gebruiken om elementen te krijgen en veranderingen te pushen.

var canvas = document.getElementById ('canvas');

Onthoud hoe we een canvaselement hebben gedefinieerd met de id = 'canvas'? Nu pakken we het uit het HTML-document door het gebruik van de document.getElementById methode, waarbij we eenvoudig de tekenreeks doorgeven die overeenkomt met de id van het gewenste element. Nu we het hebben gepakt, kunnen we het beginnen te gebruiken voor tekenen.

Om daadwerkelijk met het canvas te tekenen, moeten we de context manipuleren. Verrassend genoeg bevat een canvas geen methoden of kenmerken voor tekenen, maar het contextobject heeft alle methoden die we nodig hebben. Een context is als volgt gedefinieerd:

var context = canvas.getContext ('2d');

Elk canvas heeft een paar verschillende contexten, en voor het doel van ons programma hebben we alleen die nodig die tweedimensionaal is. Deze context die we hebben gemaakt, heeft alle tekenmethoden die we nodig hebben om ons gezicht te creëren.

Voordat we beginnen, moet ik u laten weten dat de context twee kleuren als kenmerken opslaat, één voor een streek en één voor opvulling. Voor ons smileygezicht moeten we de vulling instellen op geel en de lijn op zwart zetten.

context.fillStyle = 'geel'; context.strokeStyle = 'zwart';

Nadat de context is ingesteld op de gewenste kleuren, moeten we daadwerkelijk een cirkel voor het gezicht tekenen. Helaas heeft de context geen vooraf gedefinieerde methode voor kringen, dus we moeten een pad gebruiken dat we kennen. Een pad is gewoon een reeks samengevoegde lijnen en krommen, en dit pad wordt vervolgens gesloten wanneer de tekening is voltooid.

context.beginPath (); context.arc (320, 240, 200, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

Dus om uit te leggen, hebben we de context geïnstrueerd om een ​​nieuw pad te beginnen. Vervolgens hebben we een boog gemaakt op het punt (320, 240) met een straal van 200 pixels. De laatste twee argumenten specificeren de begin- en eindhoek om de boog te construeren. Dus we geven 0 en 2 * Math.PI radialen door om een ​​volledige cirkel te maken. Ten slotte geven we de context de opdracht om het pad te vullen en te aaien volgens de kleuren die we al hebben ingesteld.

Hoewel het sluiten van het pad geen vereiste is voor de functie van het script, moeten we het pad beëindigen zodat we nieuwe kunnen beginnen voor de ogen en de mond van ons smileygezicht. De ogen worden op precies dezelfde manier gemaakt, elk met een kleinere straal en een andere positie. Maar eerst moeten we onthouden om de vulkleur in te stellen op wit.

context.fillStyle = 'wit'; context.beginPath (); context.arc (270, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath (); context.beginPath (); context.arc (370, 175, 30, 0, 2 * Math.PI); context.fill (); context.stroke (); context.closePath ();

En dat is alles wat er met de ogen gebeurt. Nu is de mond erg vergelijkbaar, maar deze keer vullen we de boog niet en wordt onze hoek geconfigureerd als een halve cirkel. Om dit te doen, moeten we de beginhoek instellen op nul en de eindhoek op -1 * Math.PI. En onthoud, vergeet niet om de streekkleur in te stellen op rood.

context.fillStyle = 'rood'; context.beginPath (); context.arc (320, 240, 150, 0, -1 * Math.PI); context.fill () context.stroke (); context.closePath ();

Gefeliciteerd

Goed werk. Je hebt het tot het einde van de zelfstudie gehaald en je hebt een geweldig lachebek gemaakt terwijl je veel meer hebt geleerd over Canvas, HTML, JavaScript en het Document Object Model. Als u vragen heeft, kunt u een reactie achterlaten. Klik hier om het programma in actie te zien.