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

Transcript

1. Canvas Ivano Malavolta Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
2. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
3. Canvas Canvas allows you to draw anything inside the browser http://bit.ly/Ie4HKu http://bit.ly/LUKXkr http://bit.ly/LULa79 http://bit.ly/LC8AgY
4. Canvas It uses nothing more than JavaScript and HTML no external plugins, no libraries, etc. no external plugins, no libraries, etc. You can create lines, use images, use text, apply transformations, etc. http://bit.ly/KsKLv1
5. Canvas A canvas is a rectangular area, where you can control every pixel using JavaScript Returns a string Returns a string representing an encoded URL containing the grabbed graphical data
6. Coordinate System Canvas uses the standard screen coordinate system http://bit.ly/KsNip6
7. toDataUrl() image/png
8. Context It is the built-in Javascript object for the canvas HTML element It has methods to draw lines, 2D or WebGL available contexts It has methods to draw lines, boxes, circles, and more push state on state stack pop state from the stack and restore it
9. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
10. Colors & Style we can style any shape within the canvas
11. Colors & Style the distance between the inner corner and the outer corner in a line
12. Colors & Style you can use this objects as a value to strokeStyle or fillStyle creates a pattern from an image from an image [repeat | repeat-x | repeat-y | no-repeat] Specifies the gradient's position and color
13. Gradient Example
14. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
15. Drawing Rectangles All pixels inside this area will be erased Creates a filled rectangle Creates an empty rectangle
16. Drawing Complex Shapes A complex shape is represented by a Path Path Path Path, where a path is a list of subpaths path is a list of subpaths Subpaths Subpaths Subpaths Subpaths are one or more points connected by straight or curved lines The rendering context has always a current path http://bit.ly/KsSc5q
17. Paths Starts a new path, or clears the current path Creates a line from the last point to the first point Fills the current path Fills the current path with the selected color Draws the path on the canvas Creates an area in the canvas, and this area is the only visible area in the canvas
18. Paths (continued) Moves the path to the specified point (x,y), without creating a line Creates a line from the last point in the path to the given point (x,y) Creates a quadratic curve Creates a quadratic curve from the current point in the path to the specified point (x,y) Creates a Bezier curve from the current point in the path to the specified point (x,y)
19. Paths (continued) Creates an arc between two points draws along a circle creates a rectangle checks if the given point is in the path
20. Examples
21. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
22. Images draw the image, and specify the width and height clip the image, draw it, and specify the width and specify the width and height
23. Pixels Creates an empty imagedata object with the given dimensions Creates a new imagedata object, containing data from the canvas Draws imagedata onto the canvas (optionally, you can specify which part of the imageData you want to put)
24. Pixels
25. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
26. Transformations scale the canvas, based on width and height (also positioning is scaled) rotate the canvas, based on the angle (in radians) move the canvas horizontally and vertically this is not relative to past transforms
27. A word on radians A Radian Radian Radian Radian is the ratio between the length of an arc and its radius its radius x degrees = x * PI/180
28. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
29. Text draws text on the canvas, and fills it with the color set by the fillStyle attribute attribute draws text on the canvas, without filling, using the color of the strokeStyle strokeStyle attribute measures the given text string (returns the result in pixels)
30. Text sets the font (same syntax of CSS) align text on the canvas canvas vertical alignment of the text
31. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
32. Compositing transparency transparency of the drawings how drawings are how drawings are positioned onto the canvas
33. Roadmap • Intro • Colors & Style • Colors & Style • Drawings • Images & Pixels • Transformations • Text • Text • Compositing • Animations
34. Animations determines the optimal FPS for our optimal FPS for our animation
35. References http://www.w3schools.com/html5/html5_ref_canvas.asp http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf