Crea il tuo assistente AI con lo Stregatto (open source python framework)
HTML5 Graphics
1. SELA OPEN HOUSE
June 9, 2013
Canvas
Sebastian Pederiva
Senior Consultant
@spederiva
blogs.microsoft.co.il/blogs/zurdoil
Drawing as Da Vinci on a browser
2. Agenda
1. Canvas
• Shapes
• States
• Text & Shadows
2. SVG
• Introduction
• Samples
3. Canvas vs. SVG
4. WebGL
• Samples
14. States
o Drawing on the Canvas makes use of a stack of drawing
“states”
o A state stores Canvas data of elements drawn
o Transformations and clipping regions use data stored in
states
o Save() and Restore()
o Save()
o Pushes the current state to the stack
o Restore()
o Restores the last state saved from the stack
14
16. Images on Canvas
o Canvas Image API can load in image data and apply
directly to canvas Image data can be cut and sized to
desired portions
o drawImage
o ctx.drawImage(image, dx, dy);
o ctx.drawImage(image, dx, dy, dw, dh);
o ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
o getImageData
o ctx.getImageData(sx, sy, sw, sh);
16
18. Introduction to SVG
• SVG stands for Scalable Vector Graphics
• Defines graphics by using an XML model;
embedded in HTML by using an <svg> tag
• Vector Based
• Use Geometry
• Is part of the DOM
• Can be used from an external .svg
• Became a recommendation of W3C in 2001, and
re-edited in 2011
18
Use getContext() to access the 2D rendering context
Uses the standard screen-based coordinate systemarcToFor example an rounded box
Sample: Simple.html
Sample: Gradient.html
Paths are a list of subpathsSubpaths are one or more points connected by lines (straight or curved)Creating pathsBeginPath - Function call to start a pathClosePath - Function call to end a path
Sample: Complex.htm
The state includes the current transform, Fill colorsstroke colorscurrent fontfew other variables. You can save this state by pushing it onto a stack using the save() function
WebGL makes it possible to display amazing realtime 3D graphicsWhat many people don't know is that WebGL is actually a 2D API, not a 3D API. WebGL only cares about 2 things. Clipspace coordinates in 2DColors