HTML5 Canvas

1,143 views
993 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,143
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 Canvas

  1. 1. Canvas Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  2. 2. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  3. 3. Canvas Canvas allows you to draw anything inside the browserhttp://bit.ly/LC8AgYhttp://bit.ly/LULa79http://bit.ly/LUKXkrhttp://bit.ly/Ie4HKu
  4. 4. Canvas It uses nothing more than JavaScript and HTML no external plugins, no libraries, etc. You can create lines, use images, use text, apply transformations, etc.http://bit.ly/KsKLv1
  5. 5. Canvas A canvas is a rectangular area, where you can control every pixel using JavaScript Returns a string representing an encoded URL containing the grabbed graphical data
  6. 6. Coordinate System Canvas uses the standard screen coordinate systemhttp://bit.ly/KsNip6
  7. 7. toDataUrl() image/png
  8. 8. ContextIt is the built-in Javascript object for the canvas HTML element 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. 9. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  10. 10. Colors & Style we can style any shape within the canvas
  11. 11. Colors & Style the distance between the inner corner and the outer corner in a line
  12. 12. Colors & Style you can use this objects as a value to strokeStyle or fillStyle creates a pattern from an image [repeat | repeat-x | repeat-ySpecifies the gradients | no-repeat] position and color
  13. 13. Gradient Example
  14. 14. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  15. 15. Drawing Rectangles All pixels inside this area will be erased Creates a filled rectangleCreates an empty rectangle
  16. 16. Drawing Complex Shapes A complex shape is represented by a Path where a Path, path is a list of subpaths Subpaths are one or more points connected by straight or curved lines The rendering context has always a current pathhttp://bit.ly/KsSc5q
  17. 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 with the selected colorCreates an area in thecanvas, and this area is Draws the path on thethe only visible area in canvas the canvas
  18. 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 from the current point in Creates a Bezier curve the path to the specifiedfrom the current point in point (x,y)the path to the specified point (x,y)
  19. 19. Paths (continued) Creates an arc between two points draws along a circlechecks if the given point is creates a in the path rectangle
  20. 20. Examples
  21. 21. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  22. 22. Images draw the image, and specify the width and height clip the image, draw it, and specify the width and height
  23. 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. 24. Pixels
  25. 25. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  26. 26. scale the canvas, based on width and height Transformations (also positioning is scaled) rotate the canvas, based on the angle (in radians) move the canvas horizontally and vertically this is notrelative to past transforms
  27. 27. A word on radiansA Radian is the ratio between the length of an arc and its radius x degrees = x * PI/180
  28. 28. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  29. 29. Text draws text on the canvas, and fills it with the color set by the fillStyle attribute draws text on the canvas, without filling, using the color of the strokeStyle attributemeasures the given text string(returns the result in pixels)
  30. 30. Text sets the font (same syntax of CSS) align text on the canvasvertical alignment of the text
  31. 31. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  32. 32. Compositing transparency of the drawings how drawings are positioned onto the canvas
  33. 33. Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  34. 34. Animations determines the optimal FPS for our animation
  35. 35. Referenceshttp://www.w3schools.com/html5/html5_ref_canvas.asphttp://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf

×