SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Back to the future ,[object Object]
Onderwerpen ,[object Object],[object Object]
Canvas ,[object Object],[object Object],[object Object],[object Object]
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> ,[object Object]
Canvas voorbeeld http://www.abrahamjoffe.com.au/ben/canvascape/textures.htm
Canvas ondersteuning ,[object Object],[object Object],[object Object],[object Object]
Scalable Vector Graphics (SVG) ,[object Object],[object Object]
SVG ,[object Object],[object Object],[object Object],[object Object]
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.
SVG voorbeelden Oftewel: http://devfiles.myopera.com/articles/322/vistamen.svg
SVG voorbeelden Interactief: http://www.codedread.com/displayWebStats.php
SVG Ondersteuning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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?

Weitere ähnliche Inhalte

Mehr von Ruben Bos

UX design for Mobile (Appsterdam Guru Session)
UX design for Mobile (Appsterdam Guru Session)UX design for Mobile (Appsterdam Guru Session)
UX design for Mobile (Appsterdam Guru Session)
Ruben Bos
 

Mehr von Ruben Bos (8)

Agile UX Design
Agile UX DesignAgile UX Design
Agile UX Design
 
Conceptontwikkeling (CMD Talent program)
Conceptontwikkeling (CMD Talent program)Conceptontwikkeling (CMD Talent program)
Conceptontwikkeling (CMD Talent program)
 
UX design for Mobile (Appsterdam Guru Session)
UX design for Mobile (Appsterdam Guru Session)UX design for Mobile (Appsterdam Guru Session)
UX design for Mobile (Appsterdam Guru Session)
 
CMD students at Mangrove
CMD students at MangroveCMD students at Mangrove
CMD students at Mangrove
 
How the web is changing Dutch Politics [SXSW interactive 2011]
How the web is changing Dutch Politics [SXSW interactive 2011]How the web is changing Dutch Politics [SXSW interactive 2011]
How the web is changing Dutch Politics [SXSW interactive 2011]
 
Online Rules!
Online Rules!Online Rules!
Online Rules!
 
Frameworks killed the Front-end Star
Frameworks killed the Front-end StarFrameworks killed the Front-end Star
Frameworks killed the Front-end Star
 
Bureaucratie 2.0
Bureaucratie 2.0Bureaucratie 2.0
Bureaucratie 2.0
 

Back to the future: SVG & Canvas

  • 1.
  • 2.
  • 3.
  • 4.
  • 6.
  • 7.
  • 8.
  • 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. SVG voorbeelden Oftewel: http://devfiles.myopera.com/articles/322/vistamen.svg
  • 11. SVG voorbeelden Interactief: http://www.codedread.com/displayWebStats.php
  • 12.
  • 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)