HTML5 Canvas

Embed Size (px)

DESCRIPTION

Mobile applications Development - Lecture 18 HTML5 Canvas This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy). http://www.di.univaq.it/malavolta

Text of HTML5 Canvas

  • 1.Canvas Ivano Malavoltaivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta

2. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 3. CanvasCanvas allows you to draw anything inside the browserhttp://bit.ly/LC8AgYhttp://bit.ly/LULa79http://bit.ly/LUKXkrhttp://bit.ly/Ie4HKu 4. CanvasIt uses nothing more than JavaScript and HTML no external plugins, no libraries, etc.You can create lines, use images, use text, applytransformations, etc.http://bit.ly/KsKLv1 5. CanvasA canvas is a rectangular area, where you can control every pixel using JavaScript Returns a string representing an encodedURL containing the grabbedgraphical data 6. Coordinate SystemCanvas uses the standard screen coordinate systemhttp://bit.ly/KsNip6 7. toDataUrl()image/png 8. ContextIt is the built-in Javascript object for the canvas HTML element 2D or WebGLavailable contexts It has methods to draw lines,boxes, circles, and morepush state on state stackpop state from the stack and restore it 9. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 10. Colors & Style we can style any shape within the canvas 11. Colors & Stylethe distance between the inner corner and the outer corner in a line 12. Colors & Style you can use this objects as a valueto strokeStyle or fillStyle creates a pattern from an image[repeat | repeat-x |repeat-ySpecifies the gradients| no-repeat]position and color 13. Gradient Example 14. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 15. Drawing Rectangles All pixels inside this area will be erasedCreates a filled rectangleCreates an empty rectangle 16. Drawing Complex ShapesA complex shape is represented by a Path where aPath,path is a list of subpathsSubpaths are one or more points connected by straightor curved linesThe rendering context has always a current pathhttp://bit.ly/KsSc5q 17. Paths Starts a new path, orclears the current path Creates a line from thelast point to the first point Fills the current path with the selected colorCreates an area in thecanvas, and this area is Draws the path on thethe only visible area incanvasthe canvas 18. Paths (continued) Moves the path to the specified point (x,y),without creating a line Creates a line from thelast point in the path to the given point (x,y)Creates a quadratic curvefrom the current point in Creates a Bezier curve the path to the specifiedfrom the current point inpoint (x,y)the path to the specified point (x,y) 19. Paths (continued)Creates an arcbetween two points draws along a circlechecks if the given point is creates ain the path rectangle 20. Examples 21. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 22. Imagesdraw the image, and specify the width and height clip the image, draw it,and specify the widthand height 23. Pixels Creates an empty imagedata object withthe given dimensionsCreates a newimagedata object, containing data fromthe canvasDraws imagedata onto the canvas(optionally, you can specify which part of the imageData you want to put) 24. Pixels 25. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 26. scale the canvas, based on width and heightTransformations(also positioning is scaled)rotate the canvas, based on the angle (in radians)move the canvas horizontally and vertically this is notrelative to pasttransforms 27. A word on radiansA Radian is the ratio between the length of an arc andits radiusx degrees = x * PI/180 28. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 29. Textdraws text on the canvas, and fills itwith the color set bythe fillStyleattribute draws text on the canvas, withoutfilling, using the color of thestrokeStyle attributemeasures the given text string(returns the result in pixels) 30. Textsets the font(same syntax of CSS) align text on thecanvasvertical alignment of the text 31. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 32. Compositing transparencyof the drawingshow drawings are positioned onto thecanvas 33. Roadmap Intro Colors & Style Drawings Images & Pixels Transformations Text Compositing Animations 34. Animations determines the optimal FPS for ouranimation 35. Referenceshttp://www.w3schools.com/html5/html5_ref_canvas.asphttp://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf