Back to the future: SVG & Canvas

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="CANVASVOORBEELD" width="150" height="150"></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="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_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)

Back to the future: SVG & Canvas

Recommandé

Recommandé

Contenu connexe

Plus de Ruben Bos

Plus de Ruben Bos (8)

Back to the future: SVG & Canvas