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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  7. toDataUrl()
    image/png

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  13. Gradient Example

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

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

    View full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide