Canvas in html5 - TungVD

Canvas in html5 - TungVD

• 1.
  Canvas in HTML5 FramgiaCompany Name: Vũ Đăng Tùng Date: 20/07/2013
• 2.
  Summary  Introduction HTML5 Canvas in HTML5  Using Canvas 2D API with Game  Demo
• 3.
  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
• 4.
  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
• 5.
  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
• 6.
  Support  Internet Explorer7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> natively. http://diveintohtml5.info/canvas.html
• 7.
  Canvas basic <canvas id=“c”width=“800” height=“600”></canvas> ….. var canvas = document.getElementById("c"),     context = canvas.getContext("2d"); Draw & Painting Line Method : context.lineTo(), context.moveTo().. Draw & Painting Shapes Method : context.fillStyle = 'blue'; context.fillRect(10, 20, 200, 100); Draw & Painting ovals, circle Method : context.arc()… http://www.html5canvastutorials.com/
• 8.
  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.
• 9.
  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
• 10.
  Canvas with Gamemore 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);
• 11.
  Demo
• 12.
  THANKS FOR LISTENINGTHANKSFOR LISTENING