Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile applications Development - Lecture 18

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

Ivano Malavolta

June 18, 2012
Tweet

More Decks by Ivano Malavolta

Other Decks in Technology

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