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
    [email protected]
    http://www.di.univaq.it/malavolta

    View Slide

  2. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  6. Coordinate System
    Canvas uses the standard screen coordinate system
    http://bit.ly/KsNip6

    View Slide

  7. toDataUrl()
    image/png

    View Slide

  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

    View Slide

  9. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  10. Colors & Style
    we can style any shape
    within the canvas

    View Slide

  11. Colors & Style
    the distance between the inner
    corner and the outer corner in a line

    View Slide

  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

    View Slide

  13. Gradient Example

    View Slide

  14. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  15. Drawing Rectangles
    All pixels inside this area
    will be erased
    Creates a filled
    rectangle
    Creates an empty rectangle

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  20. Examples

    View Slide

  21. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  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

    View Slide

  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)

    View Slide

  24. Pixels

    View Slide

  25. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  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

    View Slide

  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

    View Slide

  28. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  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)

    View Slide

  30. Text
    sets the font
    (same syntax of CSS)
    align text on the
    canvas
    canvas
    vertical alignment of
    the text

    View Slide

  31. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  32. Compositing
    transparency
    transparency
    of the drawings
    how drawings are
    how drawings are
    positioned onto the
    canvas

    View Slide

  33. Roadmap
    • Intro
    • Colors & Style
    • Colors & Style
    • Drawings
    • Images & Pixels
    • Transformations
    • Text
    • Text
    • Compositing
    • Animations

    View Slide

  34. Animations
    determines the
    optimal FPS for our
    optimal FPS for our
    animation

    View Slide

  35. References
    http://www.w3schools.com/html5/html5_ref_canvas.asp
    http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf

    View Slide