Er zijn een aantal manieren om grafische elementen toe te voegen aan je HTML pagina. Je hebt natuurlijk de standaard plaatjes .png of .jpg’s maar vandaag wil ik het hebben over dynamische grafische elementen. We hebben het in eerdere artikelen al eerder gehad over canvas en SVG, beiden zijn waarschijnlijk termen die je wel eens voorbij hebt horen komen. Met deze 2 ontwikkeling technieken kunnen hele leuke dynamische elementen gemaakt worden van interactieve digitale map tot complete online spelletjes.
Canvas
Het HTML canvas element kan gebruikt worden om on the fly grafische elementen te tekenen met JavaScript. Het canvas element is hier de container en je gebruikt JavaScript om de grafische elementen te tekenen. Canvas heeft een aantal methoden waarmee je boxen cirkels text of plaatjes mee kan tekenen. Hieronder geef ik je een aantal simpele voorbeelden hoe je met canvas een aantal simpele elementen kan tekenen.
Voorbeeld 1
Het eerst voorbeeld is een simpele lijn die we tekenen. Eerst pakken we met javascript het canvas element met document.getElementById om vervolgens met de getContext method een veld toe te kennen aan het canvas waarop getekend kan worden. Dan met de moveTo() method beweeg je naar een bepaald punt en met de lineTo() method zet je een lijn naar de coordinaten die je opgeeft. Met elke lineTo() method wordt er een extra lijn gemaakt. En op het einde gebruiken we de stroke() method om daadwerkelijk het pad te tekenen.
Lees meer over Symfony of portals klik hieronder!
JS
// selecteer het canvas element
var c = document.getElementById(“canvasSquare”);
// roep de getContext method aan op de canvas variabele zodat we erop kunnen gaan tekenen
var ctx = canvas.getContext(‘2d’);
// Maak een pad met welke lijnen je wil maken
ctx.moveTo(0,0);
ctx.lineTo(300,100);
ctx.lineTo(200,0);
ctx.lineTo(0,100);
ctx.lineTo(200,150);
ctx.lineTo(0,0);
//Teken de lijnen
ctx.stroke();
Voorbeeld 2
We kunnen dit voorbeeld uitbreiden zodat we zelf op ons canvas kunnen tekenen. Het principe is vrijwel gelijk we voegen een paar event listeners toe de eerste is een mousedown event en dan gebruiken we de moveTo() method om naar de coordinaten te gaan. Ook zetten we een vlag aan dat we aan het tekenen zijn. Het volgende is een eventlistener die onze muisbeweging checked het onmousemove event. Hier gebruiken we de lineTo() method met de coordinaten uit het event om het pad te maken en vervolgens de stroke() method om het pad te tekenen. Ook gebruiken we een if statement om te kijken of we nog steeds aan het tekenenen zijn. Als laatste een onmouseup event om ervoor te zorgen dat we stoppen met tekenen.
JS
var el = document.getElementById(‘cDraw’);
var ctx = el.getContext(‘2d’);
var isDrawing;
el.onmousedown = function(e) {
isDrawing = true;
ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
if (isDrawing) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
};
el.onmouseup = function() {
isDrawing = false;
};
SVG
SVG staat voor Scalable Vector Graphics. SVGs zijn een op XML gebaseerde markup language om 2-dimensionale grafische elementen weer te geven. Men zegt ook wel SVG is voor graphics zoals HTML voor text is. SVG integreert makkelijk met andere W3C standaarden zoals DOM. Het mooie van SVG is dat elk element en attribuut geanimeerd kan worden. Hieronder laat ik een aantal SVG voorbeelden zien.
Allereerst beginnen we met een cirkel. SVG code is vrij eenvoudig en heeft een aantal elementen. Je begint altijd met een SVG element <svg> deze kan breedte en hoogte properties hebben <svg width=”75″ height=”75″>. In dit geval gebruiken we het cirkel element om een cirkel te tekenen. Dan heb je hierop cx en cy attributen die de x en y coordinaten representeren van het centrum van de cirkel. Het r attribuut geeft de radius van de cirkel weer. Het stroke en stroke-width attribuut beheren de border van het cirkel element. Als laatste het fill attribuut en dat geeft de kleur in de cirkel weer. Hierna sluit je het </svg> element weer en je bent klaar!</svg>
SVG
<svg height=”100″ width=”100″>
<circle cx=”50″ cy=”50″ r=”40″ stroke=”black” stroke-width=”3″ fill=”red” />
</svg>
Wist je dat?
In ons blog artikel over css gebruiken we ook SVG om de bubbles te tekenen
Zoals je kan zien zijn het beiden goede opties voor het maken van dynamische grafische elementen. Waar SVG een taal is voor het beschrijven van 2d graphics in XML tekent canvas 2d graphics on the fly met javascript. SVG is gebaseerd op XML waardoor alle SVG elementen beschikbaar zijn in de SVG DOM waardoor je ze ook event handlers kan geven. In SVG is elk element is een object bij canvas is het zo zodra hij getekend wordt hij vergeten wordt door de browser.
Hieronder kan je nog is even de belangrijkste verschillen tussen de 2 vinden.
Canvas
- Resolution dependent
- No support for event handlers
- Poor text rendering capabilities
- You can save the resulting image as .png or .jpg
- Well suited for graphic-intensive games
SVG
- Resolution independent
- Support for event handlers
- Best suited for applications with large rendering areas (Google Maps)
- Slow rendering if complex (anything that uses the DOM a lot will be slow)
- Not suited for game applications
Je hebt dus 2 fantastische front-end technieken die op heel verschillende manieren gebruikt kunnen worden en goed zijn in verschillende aspecten. Wij hopen dat je aan de hand van dit artikel iets wijzer geworden bent over SVG en Canvas animaties. Binnenkort gaan we ook wat meer eigen online spelletjes publiceren gebaseerd op canvas so stay tuned! Dan als laatste nog een heel leuk voorbeeld van hoe je bovenstaand tekenvoorbeeld uit kan breiden tot iets wat alle puntnen waar je in de buurt komt verbindt zo kan je tot hele leuke tekeningnen komen.
Heb jij nou een project waar je Grafische Elementen in nodig hebt en je hebt geen idee hoe je verder moet neem dan snel contact op met ons team en dan kijken we wat we voor elkaar kunnen betekenen.
