0
Back to the future <ul><li>22/09/08 </li></ul>
Onderwerpen <ul><li>Canvas </li></ul><ul><li>SVG </li></ul>
Canvas <ul><li><canvas> is een html element </li></ul><ul><li>Kan alleen hoogte en breedte meegeven aan element </li></ul>...
Canvas voorbeeld Javascript function drawShape(){  // get the canvas element using the DOM  var canvas = document.getEleme...
Canvas voorbeeld http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm
Canvas ondersteuning <ul><li>Safari </li></ul><ul><li>Chrome </li></ul><ul><li>Firefox (vanaf 1.5) </li></ul><ul><li>IE we...
Scalable Vector Graphics (SVG) <ul><li>&quot;Things to watch: SVG - Scalable Vector Graphics - at last, graphics which can...
SVG <ul><li>Vectoren </li></ul><ul><li>XML taal </li></ul><ul><li>Exporteren vanuit Illustrator mogelijk </li></ul><ul><li...
SVG voorbeelden <?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?><!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//E...
SVG voorbeelden Oftewel: http://devfiles.myopera.com/articles/322/vistamen.svg
SVG voorbeelden Interactief: http://www.codedread.com/displayWebStats.php
SVG Ondersteuning <ul><li>Opera </li></ul><ul><li>Firefox </li></ul><ul><li>Webkit Nightly (dus uiteindelijk ook Safari en...
SVG vs. Canvas SVG Canvas Vectoren, dus makkelijk schaalbaar Toont Pixels Moeilijk te verwerken in html pages Een HTML ele...
Vragen?
Upcoming SlideShare
Loading in...5
×

Back to the future: SVG & Canvas

1,377

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,377
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Back to the future: SVG & Canvas"

  1. 1. Back to the future <ul><li>22/09/08 </li></ul>
  2. 2. Onderwerpen <ul><li>Canvas </li></ul><ul><li>SVG </li></ul>
  3. 3. Canvas <ul><li><canvas> is een html element </li></ul><ul><li>Kan alleen hoogte en breedte meegeven aan element </li></ul><ul><li>Stijlen kan met css (background, borders e.d.) </li></ul><ul><li>Content kan vervolgens bepaald worden door JavaScript </li></ul>
  4. 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> <ul><li>Tutorial: http://developer.mozilla.org/en/Canvas_tutorial </li></ul>
  5. 5. Canvas voorbeeld http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm
  6. 6. Canvas ondersteuning <ul><li>Safari </li></ul><ul><li>Chrome </li></ul><ul><li>Firefox (vanaf 1.5) </li></ul><ul><li>IE werkt alleen d.m.v. toevoegen van Google JavaScript. </li></ul>
  7. 7. Scalable Vector Graphics (SVG) <ul><li>&quot;Things to watch: SVG - Scalable Vector Graphics - at last, graphics which can be rendered optimally on all sizes of device&quot; </li></ul><ul><li>Tim Berners-Lee, inventor of the World Wide Web </li></ul>
  8. 8. SVG <ul><li>Vectoren </li></ul><ul><li>XML taal </li></ul><ul><li>Exporteren vanuit Illustrator mogelijk </li></ul><ul><li>CSS styling ondersteund </li></ul>
  9. 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; http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd &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> http://www.svgbasics.com/examples/basic_shapes_c 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. 10. SVG voorbeelden Oftewel: http://devfiles.myopera.com/articles/322/vistamen.svg
  11. 11. SVG voorbeelden Interactief: http://www.codedread.com/displayWebStats.php
  12. 12. SVG Ondersteuning <ul><li>Opera </li></ul><ul><li>Firefox </li></ul><ul><li>Webkit Nightly (dus uiteindelijk ook Safari en Chrome) </li></ul><ul><li>En dus niet: </li></ul><ul><li>Internet Explorer (ook 8 niet, guess why...) </li></ul><ul><li>Nu nog, Safari & Google Chrome </li></ul>
  13. 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. 14. Vragen?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×