1 / 12

HTML5 Canvas

HTML5 Canvas. May 18, 2011. Subject: CPSC 473 Professor: Kenytt D. Avery Student: Scott Jung. Agenda. • What is HTML5?. • What is Canvas?. • Awesome Demos. 1. What is HTML 5?. The 5 th Revision of HTML. ▶ HTML5 is a W3C " working draft "—which is still being

nelia
Télécharger la présentation

HTML5 Canvas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Canvas May 18, 2011 Subject: CPSC 473 Professor: Kenytt D. Avery Student: Scott Jung

  2. Agenda • What is HTML5? • What is Canvas? • Awesome Demos 1

  3. What is HTML 5? The 5th Revision of HTML ▶ HTML5 is a W3C "working draft"—which is still being developed as the next generation of HTML. ▶ It aims to reduce the need for proprietary “plug-in-based” internet application technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX. 2

  4. What is HTML 5? “HTML5 is for IMPROVING your web application.” HTML5 New Features 􀀹 HTML5 is just W3C Working Draft. But 􀂃 Some core features are already supported by a lot of browsers 3

  5. What is Canvas? Canvas ▶ Dynamic and interactive graphics ▶ Draw images using 2D drawing API - Lines, curves, shapes, fills, etc. ▶ Useful for Graphs, Applications, Games, etc. 4

  6. What is Canvas? 2D Animation 5

  7. What is Canvas? 3D Graphics ▶WebGL is a Web-based Graphics Library. ▶ It uses the HTML5canvas element ▶WebGL is a context of the canvas HTML element that provides a 3D computer graphics API without the use of plug-ins. 6

  8. Awesome Demo http://www.addyosmani.com/resources/googlebox/ 7

  9. Awesome Demo http://deanm.github.com/pre3d/monster.html 8

  10. Conclusion <awesome> HTML5 Canvas </awesome> 9

  11. Reference • [1] Peter Traeg. “HTML5 Overview”. VDUNY, 01/2011. • [2] Wonsuk Lee. “HTML5 Technology”. ETRI, 03/2010 • [3] "HTML5 differences from HTML4". W3C,05/ 2011. <http://www.w3.org/TR/html5-diff> 8

  12. Thank you!!

More Related