HTML5 is a Hyper
Text Markup Language version 5. HTML5 is used as a skeleton for any web
content. It means it is used for presenting content for the WWW and Internet.
It is a fifth recommendation of World
Wide Consortium (W3C). HTML5 is rich in dynamic property. It enhances the
capabilities of HTML with the high level support of latest multimedia and DOM
level 2 HTML.
HTML5 is widely used for the Mobile Websites
and Mobile Applications. It provides wide range of capabilities for the
developers with tools as Offline Web Storage, GeoLocation, Canvas Drawing, CSS3
and many more.
The World
Wide Consortium (W3C) and Web Hypertext Application Technology
Working Group (WHATWG) are current working on the development of HTML5.
W3C plan to release a stable HTML5
Recommendation by the end of 2014.
HTML5 specifies scripting Application
Programming Interfaces (APIs) that can be used with JavaScript. Existing
Document Object Model
(DOM) interfaces are extended.
New API’s in HTML5 are:
Ø The canvas element for
2d Drawing
Ø Offline Web
Applications
Ø Document editing
Ø Drag-and-drop
Ø Cross-document
messaging
Ø Browser history
management
Ø Microdata
Ø Web Storage
Not all of the above
technologies are included in the W3C HTML5 specification, though they are in
the WHATWG HTML specification. Some related technologies, which are not part of
either the W3C HTML5 or the WHATWG HTML specification, are as follows.
The W3C publishes
specifications for these separately:
Ø GeoLocation
Ø Web SQL Database
Ø Directories and System,
an API intended to satisfy client-side-storage use cases not well served by
databases.
Ø File Writer, an API for
writing to files from web applications.
Ø Web Audio API, a
high-level JavaScript API for processing and synthesizing audio in web
applications.
Ø Class List API
HTML5 is about the
explosion of new browser feature like rich graphics and advance network
capabilities.
For Game Development,
It is beneficial to use this HTML5 and JavaScript.
If you want to move
smoothly with the development process of HTML5 Game then you must have good
control over the JSON (Java Object
Notation), DOM (Document Object
Model) and CANVAS.
JSON (JavaScript Object
Notation) is a very lightweight java data-interchange format based on
JavaScript object syntax. It is easy for machines to parse and generate. JSON
helps to get the image data i.e. Image File name, width, height and whether it
is rotated or not, etc. It is easy to implement in comparison to XML.
JSON example: parseJSON=function (arialJSON)
Ø JSON.parse à returns the javaScript
Object. Use to Parse the object.
DOM is used to access and
modify HTML dynamically using JavaScript.
DOM example:
var declarationSyntax =
document.getElementById (“body”);
Ø declarationSyntax : var is use to define any variable and
declarationSyntax is variable name.
Ø document.getElementById (“body”): get DOM element of
given ID.
CANVAS is used to draw the 2D
graphics, Text, etc.
Canvas example:
<script>
var
setup = function() {
body
= document.getElementById('body');
canvas = document.createElement('canvas');
ctx =
canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
</script>
Canvas functions
- getContext,toDataURL
Supported contexts
- 2d,WebGL
Canvas
Rendering Context 2D
The canvas stat
save,restore
save,restore
Transformations
scale,rotate,translate,transform,setTransform
scale,rotate,translate,transform,setTransform
Compositing
globalAlpha,globalCompositeOperation
globalAlpha,globalCompositeOperation
Colors and styles
strokeStyle,fillStyle,createLinearGradient,createRadialGradient,createPattern
strokeStyle,fillStyle,createLinearGradient,createRadialGradient,createPattern
Line styles
lineWidth,lineCap,lineJoin,miterLimit
lineWidth,lineCap,lineJoin,miterLimit
Shadows
shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor
shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor
Simple shapes
- clearRect,fillRect,strokeRect
Complex shapes
- beginPath,closePath,moveTo,lineTo,quadraticCurveTo,bezierCurveTo,arcTo,rect,arc,fill,stroke,clip,isPointInPath
Text
font,textAlign,textBaseline,fillText,strokeText,measureText
font,textAlign,textBaseline,fillText,strokeText,measureText
Comments