HTML5 Canvas
-
Upload
ivano-malavolta -
Category
Education
-
view
883 -
download
3
description
Transcript of HTML5 Canvas
![Page 2: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/2.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 3: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/3.jpg)
Canvas
Canvas allows you to draw anything inside the browser
http://bit.ly/Ie4HKuhttp://bit.ly/LUKXkrhttp://bit.ly/LULa79http://bit.ly/LC8AgY
![Page 4: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/4.jpg)
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, applytransformations, etc.
http://bit.ly/KsKLv1
![Page 5: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/6.jpg)
Coordinate System
Canvas uses the standard screen coordinate system
http://bit.ly/KsNip6
![Page 7: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/7.jpg)
toDataUrl()
image/png
![Page 8: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/8.jpg)
Context
It is the built-in Javascript object for the canvas HTML element
It has methods to draw lines,
2D or WebGLavailable contexts
It has methods to draw lines, boxes, circles, and more
push state on state stack
pop state from the stack and restore it
![Page 9: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/9.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 10: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/10.jpg)
Colors & Style
we can style any shapewithin the canvas
![Page 11: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/11.jpg)
Colors & Style
the distance between the inner corner and the outer corner in a line
![Page 12: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/12.jpg)
Colors & Style
you can use this objects as a value to strokeStyle or fillStyle
creates a pattern from an imagefrom an image
[repeat | repeat-x | repeat-y
| no-repeat]Specifies the gradient's
position and color
![Page 13: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/13.jpg)
Gradient Example
![Page 14: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/14.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 15: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/15.jpg)
Drawing Rectangles
All pixels inside this area will be erased
Creates a filledrectangle
Creates an empty rectangle
![Page 16: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/16.jpg)
Drawing Complex Shapes
A complex shape is represented by a PathPathPathPath, where a path is a list of subpathspath is a list of subpaths
SubpathsSubpathsSubpathsSubpaths are one or more points connected by straightor curved lines
The rendering context has always a current path
http://bit.ly/KsSc5q
![Page 17: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/18.jpg)
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)
![Page 19: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/19.jpg)
Paths (continued)Creates an arc
between two points
draws along a circle
creates a rectangle
checks if the given point is in the path
![Page 20: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/20.jpg)
Examples
![Page 21: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/21.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 22: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/22.jpg)
Imagesdraw the image, and specify the width and
height
clip the image, draw it, and specify the width and specify the width
and height
![Page 23: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/23.jpg)
PixelsCreates 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)
![Page 24: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/24.jpg)
Pixels
![Page 25: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/25.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 26: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/26.jpg)
Transformationsscale 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 notrelative to past
transforms
![Page 27: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/27.jpg)
A word on radians
A RadianRadianRadianRadian is the ratio between the length of an arc and its radiusits radius
x degrees = x * PI/180
![Page 28: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/28.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 29: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/29.jpg)
Text draws text on the canvas, and fills it
with the color set by the fillStyleattributeattribute
draws text on the canvas, without filling, using the
color of the strokeStylestrokeStyleattribute
measures the given text string (returns the result in pixels)
![Page 30: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/30.jpg)
Textsets the font
(same syntax of CSS)
align text on the canvascanvas
vertical alignment of the text
![Page 31: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/31.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 32: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/32.jpg)
Compositing
transparency transparency of the drawings
how drawings are how drawings are positioned onto the
canvas
![Page 33: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/33.jpg)
Roadmap
• Intro
• Colors & Style• Colors & Style
• Drawings
• Images & Pixels
• Transformations
• Text• Text
• Compositing
• Animations
![Page 34: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/34.jpg)
Animations
determines the optimal FPS for our optimal FPS for our
animation
![Page 35: HTML5 Canvas](https://reader031.fdocuments.us/reader031/viewer/2022013118/554f4074b4c90572088b52b2/html5/thumbnails/35.jpg)
References
http://www.w3schools.com/html5/html5_ref_canvas.asphttp://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf