A HTML5 platform demókon keresztül
•
0 likes•428 views
Az előadás témája a HTML5 platform programozása: - canvas, - svg, - audio, - video, - webfonts Az előadás megtekinthető itt: http://devportal.hu/tv/Default.aspx?auth=0&sid=92353d2f-32a4-41e0-97f6-3a2663598249
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to A HTML5 platform demókon keresztül
Similar to A HTML5 platform demókon keresztül (20)
Recently uploaded
Recently uploaded (20)
A HTML5 platform demókon keresztül
- 1. HTML5 platform Canvas, SVG, Web fonts, Audio, Video, … Dávid Zoltán david.zoltan@aut.bme.hu BMEAAIT
- 2. Demo
- 3. Canvas var canvas = document.getElementById('rajztabla'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgba( 0, 255, 0, 0.5 )'; ctx.translate(300, 250); for (var i = 0; i < 10; i++) { ctx.rotate(0.2 * Math.PI); ctx.fillRect(20, 0, 200, 100); } PAGE 3
- 4. SVG <!DOCTYPE html> <html> <body> <svg> <rect width="600" height="150" style="fill:red" /> <rect width="600" height="150" y="150" style="fill:white" /> <rect width="600" height="150" y="300" style="fill:green" /> </svg> </body> </html> PAGE 4
- 5. @font-face @font-face { font-family: SajatFont; src: url("myfont.woff"); } <p style="font: 20pt SajatFont"> Richter Elemér, kilenc kutya, hat egér </p> PAGE 5
- 6. Video <video id="myVideo" loop controls onmouseover="this.play()" onmouseout="this.pause()"> <source src="video.mp4"> </video> PAGE 6
- 7. Audio <audio id="player" controls src='zene.mp3'> </audio> document.getElementById('player').volume = 0.5; document.getElementById('player').play(); document.getElementById('player').pause(); document.getElementById('player').currentTime = 0; PAGE 7
- 10. Van-e local storage? function supports_html5_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } } PAGE 10
- 11. Van-e local storage? - Modernizr if (Modernizr.localstorage) PAGE 11
- 13. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. Thank you.