Graphics op je website I: <canvas>-tag
Dit verhaal gaat, zoals de titel zegt, over graphics die je maakt met de tag <canvas>. Deze tag maakt deel uit van de HTML5-standaard. Het bijzondere van de figuren die je met <canvas> maakt, is dat ze door de browser worden opgebouwd op basis van programma-code. Voor eenvoudige twee-dimensionale figuren gaat dat goed met JavaScript. Voor complexe 2D- en 3D-figuren kun je beter een bibliotheek gebruiken zoals Three.JS. Als je browser dat aan kan, is WebGL ook mogelijk, maar dat is moeilijk programmeren.
De <canvas>-tag is eigenlijk een container, die een script bevat. De code wordt als volgt opgezet:
<canvas id=""Mijn_Canvas" width="300" height="200"
style="border:1px solid black">
<script type="text/javascript">
var c = document.getElementById("Mijn_Canvas");
var ctx = c.getContext("2d");
.
... Hier staan de opdrachten om de tekening te maken
.
</script>
De tag <canvas> wordt door uw browser niet ondersteund.
</canvas>Zoals je ziet heeft de <canvas>-tag de attributen id, width en height. Deze zijn alle drie verplicht. Eventueel kun je nog een style-attribuut opgeven. Met width en height geef je de afmetingen op, in pixels. Desgewenst kun je ze in het style-attribuut zetten, zodat je andere eenheden dan pixels kunt gebruiken.
Het is mogelijk om de afmetingen van het canvas aan te passen. Dat doe je met JavaScript. Als je dat doet wordt het canvas leeggemaakt. Je moet na wijziging van width of height de afbeelding op het canvas opnieuw opbouwen.
De eerste twee regels JavaScript code zijn altijd nodig. Het id heb je nodig voor de communicatie met JavaScript.
Eerst maak je een variabele die de het canvas-object bevat, zodat je het kunt benaderen. Dat gaat via ket id. De variable
is hier: c.
Daarna sla je de context van het canvas-object op in een tweede variabele, hier is dat ctx. Voor het maken van een
platte afbeelding gebruik je de parameter "2d". Dit wordt door alle grote browsers ondersteund.
Als je WebGL wilt inzetten gebruik je "webgl" (of "experimental-webgl", voor Internet Explorer).
Daarmee maak je een omgeving waarmee je 3D-graphics kunt maken. Dat werkt alleen bij browsers die beschikken over WebGL versie
1.0 (OpenGL ES 2.0).
Om in het canvas te tekenen gebruik je methodes van ctx, bijvoorbeeld:
met ctx.rect(20,20,150,100) teken je een rechthoek.
- Met <canvas> kun je:
- Teksten schrijven
- Lijnen tekenen
- Cirkels en cirkelbogen tekenen
- Parabolen en Bezier-krommen tekenen
- Rechthoeken tekenen
- Onregelmatige veelhoeken tekenen
- De elementen kun je vormgeven:
- Font en lettergrootte
- Kleur
- Lijndikte
- Opvulling: massief, lineair en cirkelvormig verlopend
- Verplaatsen en roteren
- Kopiëren en plakken
- enzovoort.
- De elementen kun je animeren. Hier is veel mogelijk, van een stuitende bal tot een spelletje of een analoge klok.
- Klik op de knop rechts, dan zie je een analoge klok die helemaal met <canvas> is gemaakt.
- Als je de code van de klok bekijkt zul je zien dat het script niet binnen de <canvas>-tag staat, maar er na. Dat mag ook. De koppeling van het script aan de <canvas>-tag verloopt via het id. Maar zet het script niet vóór de <canvas>-tag, want dan werkt het niet.
- Het zal je ook opvallen dat de klok elke seconde helemaal opnieuw wordt getekend. Dat is nodig omdat <canvas>
bitmaps maakt. Een eenmaal getekend object kan niet niet zomaar gewijzigd worden, je moet het hele plaatje opnieuw tekenen.
Dat gaat zo snel dat het lijkt of je een vloeiende beweging ziet.
Hetzelfde doet zich voor als de grootte van het canvas wordt gewijzigd. - Het tekenen en animeren van 2D-figuren is in <canvas> goed te doen, als de figuren niet te complex zijn.
Voor meer ingewikkelde zaken en voor het tekenen van 3D-modellen is het verstandig een 3D-bibliotheek te gebruiken. Dan kun je ook een platform als WebGL inzetten. De bibliotheek Three.JS kan WebGL gebruiken zonder dat je daar zelf bemoeienis mee hebt, natuurlijk alleen als de grafische kaart van je PC met WebGL overweg kan. - Op de site van Three.js is een verzameling voorbeelden beschikbaar waarbij WebGL wordt ingezet.
