Collections Developer Collection Web Development HTML5
HTML5 and the canvas provide a significant improvement to graphic capabilities on the web. The canvas can be used for interactive or very details drawing within a web page and SVG can be used to ensure the quality of your images are not lost due to scaling on all screen sizes. In this course, you'll learn the fundamentals of using both SVG and the HTML5 canvas and how they'll allow your web site to scale and dynamically display or draw graphics.
| Objectives |
HTML5 SVG Graphics - start the course
- describe Scalable Vector Graphics (SVG) and its use in creating high quality images in HTML5
- add an SVG drawing to an HTML5 page that draws a line
- use SVG to draw a rectangle in an HTML5 document
- describe how SVG can be used to make a rectangle with rounded corners in an HTML5 document
- use SVG to draw circles and ellipses in an HTML5 document
- use SVG to add polyline drawings in an HTML5 document
- use SVG to add text to an HTML5 document
- describe how to rotate SVG objects in HTML5
- work with SVG to place text on a path in an HTML5 document
- add transparency to an SVG object in an HTML5 document
The HTML5 Canvas - describe the HTML5 Canvas and why it would be used
- use the canvas in an HTML5 document
- apply size constraints to a canvas to have it fit the size of the screen in an HTML5 document
- describe how to move the canvas in an HTML5 document
- describe how to rotate the canvas in an HTML5 document
Basic Canvas Drawing - use HTML5 to draw lines on the canvas
- use HTML5 to render text on the canvas
- draw rectangles on the canvas using HTML5
- use HTML5 to draw arcs and curves on the canvas
- describe how circles can be drawn to the canvas using HTML5
- perform canvas operations to load and display a bitmap graphic in an HTML5 document
Color and the HTML5 Canvas - set the color of the canvas using HTML5
- use HTML5 to place an image on the canvas
- describe how gradients can be created on a canvas in an HTML5 document
- use HTML5 to clear the canvas
Canvas Tracking and Animating - work with the HTML5 canvas to track objects
- describe how to track mouse coordinates in an HTML5 canvas
- describe how to create basic animations using the HTML5 canvas
- perform object rotation in HTML5 canvas
Practice: Creating a Graphic in HTML5 - how to add graphic on an HTML page
|
