1. 1. Graphics & Animation with HTML5 Graphics & Animation with HTML5 Pushpendu Purkait Software Consultant Knoldus Software LLP Pushpendu Purkait Software Consultant Knoldus Software LLP
2. 2. Agenda Introduction of HTML5 What's new in HTML5 ? HTML5 Graphics HTML5 Animation Demo
3. 3. Introduction of HTML5 HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhance support for creating web applications that can interact with the user, his/her local data, and servers, more easily and effectively than was possible previously.
4. 4. What's new in HTML5 DOCTYPE The element No More Types for Scripts and Links New types color number email url range
5. 5. What's new in HTML5 cont.. , tags Required Attribute , tag Regular Expression
6. 6. DOCTYPE HTML4 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. > HTML5
7. 7. The tag Before

   Description of image

   Now

   Description of image

8. 8. No more types for Scripts and links Before Now
9. 9. New tags Color - To choose color from the color palette Number To get only numbers in textbox. Email To get only email in textbox. Url To get only URL in textbox. Range To get value within a range.(By using Slider)
10. 10. tags tag is used to add header on web page. tag is used to add footer on web page.
11. 11. Required Attribute User can't leave the field blank JavaScript is no longer required for client side validation.
12. 12. tag tag is used to add an audio file to web page. In case tag is not supported by web browser, We can add alternative text. Multiple files can be added if first is not supported by browser then next will be played. We can add controllers in tag. Downloadthisfile.
13. 13. tag tag is used to add video to the web page. In case tag is not supported by web browser, We can add alternative text. Multiple files can be added if first is not supported by browser then next will be played. We can add controllers in tag. We can access out webcam and show it in tag.

    Yourbrowserisdoesn'tsupportit.

14. 14. Regular Expressions We can add regular expressions to tags for validation, There is no JavaScript required. CreateaUsername: 10" pattern="[A-Za-z]{4,10}" autofocus required> Go
15. 15. HTML5 Graphics is the most important part of HTML5 graphics. At first sight a looks like the element, with the only clear difference being thatitdoesn'thavethesrcandaltattributes. hasonlytwoattributesheight&width. both are optional and can be set using DOM properties. Fallback Content- If browser doesn't support canvas than we can add fallback content.
16. 16. HTML5 Graphics cont... We can draw anything on by using some inbuilt functions. Some tasks which can be done in canvas: Drawing Rectangle Drawing Path (lines & arcs) Applying Colors & Style Rendering Text Applying Transformation (translation,scaling, rotating)
17. 17. Canvas Context There is a context of canvas by which we draw everything on canvas. Context contains some properties for drawing for example: color, width etc. For best practice when we call any function, we should always save() the context first and at last restore() the context.
18. 18. Drawing Rectangle We can draw rectangles by 3 ways fillRect(x,y, width, height):- draws a filled rectangle. strokeRect(x,y, width, height):- draws an outline. clearRect(x,y,width, height):- clears the area.
19. 19. Drawing Path Paths can be of two types Closed Open There are some steps of drawing a line on canvas BeginPath():- creates a new path moveTo(x,y):- moves the cursor to (x,y) point. lineTo(x,y):- draws line from current position to (x,y) point stroke() :- draws the line on canvas.(without this no lines will be drawn) closePath():- draws line from current position to first point. fill():- fills the closed path.
20. 20. Applying Colors & Style We can set fillStyle for filling the object. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i=0;i