2. Agenda Introduction of HTML5 What's new in HTML5 ? HTML5
Graphics HTML5 Animation Demo
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. What's new in HTML5 DOCTYPE The element No More Types for
Scripts and Links New types color number email url range
5. What's new in HTML5 cont.. , tags Required Attribute , tag
Regular Expression
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. tags tag is used to add header on web page. tag is used to
add footer on web page.
11. Required Attribute User can't leave the field blank
JavaScript is no longer required for client side validation.
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. 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. 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. 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. 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. 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. 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. 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. 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