Back to the future: SVG & Canvas
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Back to the future: SVG & Canvas

Uploaded on

A short status update of using Canvas and SVG as a Front-end Developer for internal use. Published

A short status update of using Canvas and SVG as a Front-end Developer for internal use. Published

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 11 6 4 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Back to the future
    • 22/09/08
  • 2. Onderwerpen
    • Canvas
    • SVG
  • 3. 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
  • 4. Canvas voorbeeld Javascript function 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=&quot;CANVASVOORBEELD&quot; width=&quot;150&quot; height=&quot;150&quot;></canvas>
    • Tutorial:
  • 5. Canvas voorbeeld
  • 6. Canvas ondersteuning
    • Safari
    • Chrome
    • Firefox (vanaf 1.5)
    • IE werkt alleen d.m.v. toevoegen van Google JavaScript.
  • 7. Scalable Vector Graphics (SVG)
    • &quot;Things to watch: SVG - Scalable Vector Graphics - at last, graphics which can be rendered optimally on all sizes of device&quot;
    • Tim Berners-Lee, inventor of the World Wide Web
  • 8. SVG
    • Vectoren
    • XML taal
    • Exporteren vanuit Illustrator mogelijk
    • CSS styling ondersteund
  • 9. SVG voorbeelden <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?><!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot; &quot;><svg viewBox = &quot;0 0 200 200&quot; version = &quot;1.1&quot;> <circle cx = &quot;100&quot; cy = &quot;100&quot; r = &quot;80&quot; fill = &quot;orange&quot; stroke = &quot;navy&quot; stroke-width = &quot;10&quot;/></svg> ircle1.svg circle - the element that we're using cx, 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.
  • 10. SVG voorbeelden Oftewel:
  • 11. SVG voorbeelden Interactief:
  • 12. 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
  • 13. 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)
  • 14. Vragen?