Back to the future: SVG & Canvas
-
Upload
ruben-bos -
Category
Technology
-
view
1.364 -
download
1
description
Transcript of 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?