Canvas in html5 - TungVD

605 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
605
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Canvas in html5 - TungVD

  1. 1. Canvas in HTML5 Framgia Company Name: Vũ Đăng Tùng Date: 20/07/2013
  2. 2. Summary  Introduction HTML5  Canvas in HTML5  Using Canvas 2D API with Game  Demo
  3. 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. 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. 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. 6. Support  Internet Explorer 7 and 8 require the third-party explorercanvas library. Internet Explorer 9 supports <canvas> natively. http://diveintohtml5.info/canvas.html
  7. 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. 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. 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. 10. 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);
  11. 11. Demo
  12. 12. THANKS FOR LISTENINGTHANKS FOR LISTENING

×