HTML5 Canvas
Upcoming SlideShare
Loading in...5
×
 

HTML5 Canvas

on

  • 1,223 views

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

Statistics

Views

Total Views
1,223
Views on SlideShare
1,223
Embed Views
0

Actions

Likes
1
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Canvas HTML5 Canvas Presentation Transcript

  • Canvas Ivano Malavolta ivano.malavolta@univaq.ithttp://www.di.univaq.it/malavolta
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • Canvas Canvas allows you to draw anything inside the browserhttp://bit.ly/LC8AgYhttp://bit.ly/LULa79http://bit.ly/LUKXkrhttp://bit.ly/Ie4HKu View slide
  • 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 View slide
  • 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
  • Coordinate System Canvas uses the standard screen coordinate systemhttp://bit.ly/KsNip6
  • toDataUrl() image/png
  • 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
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • Colors & Style we can style any shape within the canvas
  • Colors & Style the distance between the inner corner and the outer corner in a line
  • 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
  • Gradient Example
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • Drawing Rectangles All pixels inside this area will be erased Creates a filled rectangleCreates an empty rectangle
  • 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
  • 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
  • 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)
  • Paths (continued) Creates an arc between two points draws along a circlechecks if the given point is creates a in the path rectangle
  • Examples
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • Images draw the image, and specify the width and height clip the image, draw it, and specify the width and height
  • 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)
  • Pixels
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • 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
  • A word on radiansA Radian is the ratio between the length of an arc and its radius x degrees = x * PI/180
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • 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)
  • Text sets the font (same syntax of CSS) align text on the canvasvertical alignment of the text
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • Compositing transparency of the drawings how drawings are positioned onto the canvas
  • Roadmap• Intro• Colors & Style• Drawings• Images & Pixels• Transformations• Text• Compositing• Animations
  • Animations determines the optimal FPS for our animation
  • Referenceshttp://www.w3schools.com/html5/html5_ref_canvas.asphttp://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf