Back to the future: SVG & Canvas

Back to the future22/09/08

Onderwerpen

Canvas

SVG

Canvas

<canvas> is een html element

Kan alleen hoogte en breedte meegeven aan element

Stijlen kan met css (background, borders e.d.)

Content kan vervolgens bepaald worden door JavaScript

Canvas voorbeeld

Javascriptfunction drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('CANVASVOORBEELD'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ // use getContext to use the canvas for drawing var ctx = canvas.getContext('2d'); // Draw shapes ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); }}

HTML<canvas id="CANVASVOORBEELD" width="150" height="150"></canvas>

Tutorial: http://developer.mozilla.org/en/Canvas_tutorial

Canvas voorbeeld

http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm

Canvas ondersteuning

Safari

Chrome

Firefox (vanaf 1.5)

IE werkt alleen d.m.v. toevoegen van Google JavaScript.

Scalable Vector Graphics (SVG)

"Things to watch: SVG - Scalable Vector Graphics - at last, graphics which can be rendered optimally on all sizes of device"

Tim Berners-Lee, inventor of the World Wide Web

SVG

Vectoren

XML taal

Exporteren vanuit Illustrator mogelijk

CSS styling ondersteund

SVG voorbeelden

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox = "0 0 200 200" version = "1.1"> <circle cx = "100" cy = "100" r = "80" fill = "orange" stroke = "navy" stroke-width = "10"/></svg>

http://www.svgbasics.com/examples/basic_shapes_circle1.svg

circle - the element that we're usingcx, cy - the co-ordinates of the center of the circle.r - the circle radius.fill - the colour to use for the interior of the shape.stroke - the colour of the circle outline.stroke-width - the thickness of the line used to trace the circle.

SVG voorbeelden

Oftewel:

http://devfiles.myopera.com/articles/322/vistamen.svg

SVG voorbeelden

Interactief:

http://www.codedread.com/displayWebStats.php

SVG Ondersteuning

Opera

Firefox

Webkit Nightly (dus uiteindelijk ook Safari en Chrome)

En dus niet:

Internet Explorer (ook 8 niet, guess why...)

Nu nog, Safari & Google Chrome

SVG vs. Canvas

SVG Canvas

Vectoren, dus makkelijk schaalbaar Toont Pixels

Moeilijk te verwerken in html pages Een HTML element

Geen CSS ondersteuning. Opmaak in taal zelf.

CSS ondersteund

alleen fake 3D’ 3D Canvas (gebruikt Grafische kaart)

Vragen?