HTML Graphics. Hans Roeyen V 3.0

HTML Graphics

© Hans Roeyen 19 maart 2015

V 3.0

HTML5

Inhoud

1.

HTML5 Canvas .............................................................................................................. 3

1.1.

Het Canvas element ........................................................................................................ 3

2.

SVG Element .................................................................................................................. 9

2.1.

SVG vergeleken met Canvas .......................................................................................... 9

2.2.

Een cirkel tekenen met SVG ........................................................................................ 10

2.2.1. Verschillende figuren ................................................................................................... 11

Hans Roeyen

HTML Graphics

2-12

HTML5

1. HTML5 Canvas Het Canvas laat zich het best omschrijven als een "scriptable bitmap". Met andere woorden: je kunt met Javascript tekenen en animeren. Het feit dat het Canvas gebruikt kan worden zonder het installeren van plug-ins maakt het in de toekomst een erg belangrijk onderdeel van HTML5. De oorsprong van Canvas ligt bij Apple, waar het ontwikkeld werd voor Safari en het Dashboard. Later is het opgenomen in HTML5. Het is bedoeld om op bitmap niveau te tekenen. Je kunt er games, diagrammen, interactieve graphics en dergelijke mee maken. De combinatie met audio en video is eveneens mogelijk maar wordt afgeraden door W3C. Canvas ondersteunt 2D (en ook 3D ) context voor het tekenen en manipuleren van afbeeldingen. Ondersteuning voor 3D is nog experimenteel. Het Canvas heeft twee belangrijke eigenschappen. Ten eerste is het een Bitmap, dit in tegenstelling tot Flash en Silverlight. We werken dus met pixels en niet met vectoren. Ten tweede werkt het als "fire and forget". Wanneer er iets op het Canvas wordt getekend, dan wordt dat niet bij gehouden in een DOM. Het is dus niet mogelijk om een bepaald getekend object later weer aan te spreken. Dit lijkt erg onhandig, maar zorgt er wel voor dat het Canvas erg snel is. Er wordt namelijk geen collectie van objecten bijgehouden en daardoor kan er in een hoog tempo getekend worden. 1.1. Het Canvas element Het Canvas element zelf doet eigenlijk niet zo veel. Je kunt het element het beste zien als een leeg stuk papier. Als attributen geef je de breedte en hoogte op en in het element specificeer je de content die gebruikers te zien krijgen wanneer ze een browser gebruiken die het Canvas element niet ondersteunt. Dit kan een simpele melding of afbeelding zijn, maar ook een vervangende Flash- of Silverlight-applicatie. Het toevoegen van de tag is niet anders dan je al hebt gezien in de lessen HTML.

<meta charset="UTF-8"> De waarde van de attributen width en height bepalen de afmeting van het bruikbare gebied om te tekenen. Indien je geen waarden opgeeft, worden de default waarden 300 x 150 gebruikt. Het gebruik van een ID is niet verplicht maar dat maakt het gemakkelijker om te adresseren in het script. De canvas tag geeft je niet meer dan een rechthoek.

Hans Roeyen

HTML Graphics

3-12

HTML5

Om te kunnen tekenen heb je dus nog iets nodig want alles wat je nu hebt gemaakt is een afbakening waarbinnen je iets kunt doen. Maar er is nog geen materiaal om op te tekenen, zeg maar dat er nog geen papier of doek is. De manier om dat toe te voegen is het toevoegen van de context. Daar komt een beetje JavaScript bij kijken: <script> var canvas = document.getElementById(drawingCanvas); var ctx = canvas.getContext('2d'); De eerste regel declareert een variabele var canvas om de waarden in op te slaan en gebruikt de method getElementById om het canvas te selecteren (in dit voorbeeld is dat “drawingCanvas). De tweede regel declareert de variabele var ctx en gebruikt de method getContext om de (2D) context te selecteren. De functie window.onload zorgt ervoor dat het tekenen niet start voor het volledige document geladen is in de browser. Een volledige voorbeeldcode ziet er als volgt uit: <meta charset="utf-8"> <style> canvas { border: 1px dashed black; } <script> window.onload = function() { var canvas = document.getElementById("drawingCanvas"); var context = canvas.getContext("2d"); // (Hier komt je tekening.) }; Het resultaat van deze oefening is niets meer dan een rechthoek met stippellijntjes.

Het Context object bevat alle tekenfunctionaliteit. Zo is het mogelijk om lijnen, bogen, vierkanten, vlakken en teksten te tekenen. Hans Roeyen

HTML Graphics

4-12

HTML5

Een andere oefening

<meta charset="utf-8"> <style> canvas { border: 1px dashed black; } <script> window.onload = function() { var canvas = document.getElementById("drawingCanvas"); var context = canvas.getContext("2d"); // stelt de lijndikte en de kleur in voor alle lijnen context.lineWidth = 20; context.strokeStyle = "rgb(205,40,40)"; // tekent de eerste lijn context.moveTo(10,50); context.lineTo(400,50); context.lineCap = "butt"; context.stroke(); // tekent de tweede lijn met een rond einde context.beginPath(); context.moveTo(10,120); context.lineTo(400,120); context.lineCap = "round"; context.stroke(); // tekent de derde lijn met een recht einde context.beginPath(); context.moveTo(10,190); context.lineTo(400,190); context.lineCap = "square"; context.stroke(); };

Hans Roeyen

HTML Graphics

5-12

HTML5

Het resultaat van deze oefening ziet er zo uit

Hans Roeyen

HTML Graphics

6-12

HTML5

Oefening 3

<meta charset="utf-8"> <style> canvas { border: 1px dashed black; } <script> window.onload = function() { var canvas = document.getElementById("drawingCanvas"); var context = canvas.getContext("2d"); context.moveTo(250,50); context.lineTo(50,250); context.lineTo(450,250); context.closePath(); // kleurt het figuur. context.fillStyle = "blue"; context.fill(); // tekent de rand rond het canvas. context.lineWidth = 10; context.strokeStyle = "red"; context.stroke(); };

Hans Roeyen

HTML Graphics

7-12

HTML5

Het resultaat van deze oefening ziet er zo uit

Meer informatie en oefeningen voor de canvas tag vind je op W3Schools http://www.w3schools.com/html/html5_canvas.asp Bij Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

Hans Roeyen

HTML Graphics

8-12

HTML5

2. SVG Element De afkorting SVG staat voor Scalable Vector Graphics. Het zijn vector-based graphics in XML formaat. Het voordeel van vector-based afbeeldingen is dat ze geen kwaliteit verliezen als ze vergroot of aangepast worden. Elk element en attribuut van een SVG bestand kan geanimeerd worden. Om met SVG te kunnen werken is wel enige voorkennis van XML nodig. Je hebt natuurlijk ook kennis van HTML5 nodig maar zover ben je al. Omdat het in XML wordt geschreven kun je een SVG afbeelding met een tekstverwerker maken. Het is misschien belangrijk om te vermelden dat de grootste steun voor dit opensource formaat afkomstig is van Flash. Het grote voordeel dat SVG heeft tegenover Flash is dat het compatibel is met andere standaarden zoals het DOM. Flash heeft als grootste nadeel dat het afhankelijk is van proprietary technologie en dus niet open-source is. Er is een aparte tutorial op W3school voor dit onderwerp: http://www.w3schools.com/svg/

2.1. SVG vergeleken met Canvas Met SVG schrijf (of beschrijf) je 2D afbeeldingen in XML. Canvas tekent ook 2D afbeeldingen maar in real-time met JavaScript. SVG is op XML gebaseerd wat maakt dat elk element beschikbaar is in het SVG DOM. Eenvoudig gezegd heeft dat tot gevolg dat je JavaScript event handlers kunt gebruiken voor elk element. Een ander verschil tussen beide is dat een afbeelding die je met SVG maakt, als object bewaard wordt in je browser. Als er attributen van een SVG object gewijzigd worden zal de browser automatisch de afbeelding tonen volgens de nieuwe waarden. Canvas wordt pixel voor pixel opgebouwd door de browser, maar eens de afbeelding klaar is wordt ze vergeten door de browser. Als er attributen zoals de positie of afmeting aangepast worden zal de browser de volledige afbeelding opnieuw moeten hertekenen. Canvas Is afhankelijk van de resolutie Geen ondersteuning voor event handlers Zwakke ondersteuning voor het renderen van tekst Het resultaat iste bewaren als png of jpg bestand Best geschikt voor grafische games

Hans Roeyen

SVG Is onafhankelijk van de resolutie Wel ondersteuning voor event handlers Best geschikt voor applicaties die grote bereiken renderen, zoals Google Maps Trage rendering voor complexe afbeeldingen als het DOM van toepassing is Niet geschikt voor games

HTML Graphics

9-12

HTML5

2.2. Een cirkel tekenen met SVG <svg width="100" height="100"> Uw browser heeft geen ondersteuning voor inline SVG. Dit is het resultaat van deze oefening

De <svg> tag heeft de attributen voor de breedte en de hoogte. Binnen de tag geef je aan welke figuur je wilt tekenen, in dit voorbeeld is dat een cirkel. Deze tag heeft als attributen de positie van de cirkel op de x- en y-as. De X-as bepaald de horizontale positie en de Y-as de verticale positie. Let wel op dat je de positie van de figuur binnen de ingestelde afmetingen van de <svg> tag plaatst. Anders wordt je figuur niet getoond. Zoals je waarschijnlijk vermoedde stel je met het R-attribuut de straal van de cirkel in. Let ook hier op de waarde die je kies voor dit attribuut, best maak je vooraf een schets om te weten wat je wilt bereiken.

Hans Roeyen

HTML Graphics

10-12

HTML5

2.2.1. Verschillende figuren Er zijn veel verschillende figuren die je met SVG kunt tekenen. Een paar voorbeelden: Een rechthoek <svg width="600" height="200"> Uw browser heeft geen ondersteuning voor inline SVG. Het resultaat van deze oefening ziet er nogal fel uit ….

Hans Roeyen

HTML Graphics

11-12

HTML5

Een ellips <svg height="140" width="500"> <ellipse cx="150" cy="70" rx="120" ry="40" style="fill: purple;stroke:green;strokewidth:10" /> Uw browser heeft geen ondersteuning voor inline SVG. Deze oefening geeft je een resultaat dat er ongeveer zo kan uitzien

De andere vormen die met SVG gemaakt kunnen worden zijn eigenlijk zo goed als oneindig. Door de tags zoals Polygon en Path heb je de mogelijkheid om je eigen vormen te maken, wat je maar wenst. De mogelijkheden zijn te uitgebreid om hier te documenteren, een vollediger overzicht vind je bijvoorbeeld op http://www.w3schools.com/svg/svg_polygon.asp en http://www.w3schools.com/svg/svg_path.asp

De opmaak van de vormen doe je met het style element, wat een inline CSS opmaak mogelijk maakt. Hierdoor zijn alle mogelijkheden van CSS voor SVG te gebruiken. Een volledig overzicht van SVG http://www.w3schools.com/html/html5_svg.asp

Hans Roeyen

HTML Graphics

12-12