Canvas in HTML5

Framgia Company

Name: Vũ Đăng TùngDate: 20/07/2013

Summary Introduction HTML5 Canvas in HTML5 Using Canvas 2D API with Game Demo

Introduction HTML5 HTML (HyperText Markup Language) Version :

1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless Web Design 2005 AJAX 2009 HTML 5

What new ? Html5 based on Development HTML,

CSS, DOM, and Javascripts. HTML5 ~=Html + Js + Css

New Tags: <aside> , <article>, <section>, <hgroup>..http://slides.html5rocks.com/#semantic-tags-2

Play audio , video. Using <canvas> with 2D graphic Support Local Storage

Canvas in HTML5 Canvas is new element in html5 and is

useful in web based graphics. Html5 define <canvas> as a resolution-

dependent bitmap . Use <canvas id=“”>…</canvas>

Use for rendering graph Game graphics Visual images

Support

Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> natively.

http://diveintohtml5.info/canvas.html

Canvas basic<canvas id=“c” width=“800” height=“600”></canvas>…..var canvas = document.getElementById("c"),    context = canvas.getContext("2d");

Draw & Painting LineMethod : context.lineTo(), context.moveTo()..

Draw & Painting ShapesMethod : context.fillStyle = 'blue'; context.fillRect(10, 20,

200, 100);Draw & Painting ovals, circle

Method : context.arc()…

http://www.html5canvastutorials.com/

Canvas 2D API In the Canvas 2D API, image data is stored in an object with

3 attributes imageData is width, height and data. In that data is a one-dimensional array containing the pixel. Each pixel contains 4 corresponding elements R, G, B, A.

Canvas 2D API Some method process image :

imagedata = context.createImageData(imagedata) imagedata = context.getImageData(sx, sy, sw, sh) context . putImageData(imagedata, dx, dy [,

dirtyX, dirtyY, dirtyWidth, dirtyHeight ]) Get ordinate :e.pageX, e.pageY, e.offsetLeft , e.offsetRight

Canvas with Game more games

Move object in game :~ draw new object + delete old object with Interval.

setInterval(method draw and delete , interval)Example:context.clearRect(0,0,canvas.width,canvas.height); object.draw(context);

Demo

THANKS FOR LISTENINGTHANKS FOR LISTENING