際際滷

際際滷Share a Scribd company logo

Canvas in html5 - TungVD

Download as PPT, PDF
Framgia Vietnam
Framgia Vietnam

This document discusses Canvas in HTML5. It introduces HTML5 and the Canvas element, which allows for 2D graphic rendering and is useful for games. The Canvas 2D API stores image data and allows getting, creating, and putting image data. Methods like lineTo, moveTo, fillRect, arc can draw and paint lines, shapes, and ovals. Games can use intervals to move objects by drawing new and deleting old objects. A demo is provided.

1 of 12
Downloaded 17 times
Canvas in HTML5 Framgia Company Name: V滴 ng T湛ng Date: 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 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/
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

More Related Content

Canvas in html5 - TungVD

  • 1. Canvas in HTML5 Framgia Company 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 Explorer 7 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 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. Demo
  • 12. THANKS FOR LISTENINGTHANKS FOR LISTENING