canvas in html5 - tungvd
TRANSCRIPT
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