SlideShare una empresa de Scribd logo
1 de 62
Games



           Multimedia Apps
Charting
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo
createRadialGradient   rect
data                       miterLimit
fillStyle                  shadowBlur
font                       shadowColor
globalAlpha                shadowOffsetX
globalCompositeOperation   shadowOffsetY
height                     strokeStyle
lineCap                    textAlign
lineJoin                   textBaseline
lineWidth                  width
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo   toDataURL
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo   toDataURL
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo   toDataURL
createRadialGradient   rect
addColorStop           drawImage          restore
arc                    fill               rotate
arcTo                  fillRect           save
beginPath              fillText           scale
bezierCurveTo          getImageData       setTransform
clearRect              isPointInPath      stroke
clip                   lineTo             strokeRect
closePath              measureText        strokeText
createImageData        moveTo             transform
createLinearGradient   putImageData       translate
createPattern          quadraticCurveTo   toDataURL
createRadialGradient   rect
3       7      11
Alpha   Alpha   Alpha
 15      19      23
Alpha   Alpha   Alpha
http://mirovideoconverter.com/
VP8          Depends             6.0           4.0     Depends   Depends
    (WebM)
     H.264           9 beta             X          Depends     3.1       X
     (MP4)
   Ogg Theora           X              3.0           3.5       X        10.5




Source: http://en.wikipedia.org/wiki/HTML5_video
WAV             9 beta              X                  3.6   5.1   10.5


        MP3            9 beta             6.0                 X     5.1    X

     Ogg Vorbis           X               6.0                 3.6   X     10.5




Source: http://html5doctor.com/native-audio-in-the-browser/
Encode in multiple
formats
Suresh.Balla@neudesic.com

Más contenido relacionado

Similar a Html5 Canvas and Media

Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScriptBuilding Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
David Isbitski
 

Similar a Html5 Canvas and Media (11)

Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScriptBuilding Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
 
Raphael
RaphaelRaphael
Raphael
 
The Ring programming language version 1.7 book - Part 49 of 196
The Ring programming language version 1.7 book - Part 49 of 196The Ring programming language version 1.7 book - Part 49 of 196
The Ring programming language version 1.7 book - Part 49 of 196
 
The Ring programming language version 1.3 book - Part 35 of 88
The Ring programming language version 1.3 book - Part 35 of 88The Ring programming language version 1.3 book - Part 35 of 88
The Ring programming language version 1.3 book - Part 35 of 88
 
The Ring programming language version 1.5.4 book - Part 45 of 185
The Ring programming language version 1.5.4 book - Part 45 of 185The Ring programming language version 1.5.4 book - Part 45 of 185
The Ring programming language version 1.5.4 book - Part 45 of 185
 
Introduction to Cappuccino
Introduction to CappuccinoIntroduction to Cappuccino
Introduction to Cappuccino
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
The Ring programming language version 1.5.3 book - Part 45 of 184
The Ring programming language version 1.5.3 book - Part 45 of 184The Ring programming language version 1.5.3 book - Part 45 of 184
The Ring programming language version 1.5.3 book - Part 45 of 184
 
The Ring programming language version 1.5.3 book - Part 55 of 184
The Ring programming language version 1.5.3 book - Part 55 of 184The Ring programming language version 1.5.3 book - Part 55 of 184
The Ring programming language version 1.5.3 book - Part 55 of 184
 
The Ring programming language version 1.10 book - Part 55 of 212
The Ring programming language version 1.10 book - Part 55 of 212The Ring programming language version 1.10 book - Part 55 of 212
The Ring programming language version 1.10 book - Part 55 of 212
 
[C++ GUI Programming with Qt4] chap8
[C++ GUI Programming with Qt4] chap8[C++ GUI Programming with Qt4] chap8
[C++ GUI Programming with Qt4] chap8
 

Último

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Último (20)

Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 

Html5 Canvas and Media

  • 1.
  • 2.
  • 3.
  • 4. Games Multimedia Apps Charting
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect
  • 16. data miterLimit fillStyle shadowBlur font shadowColor globalAlpha shadowOffsetX globalCompositeOperation shadowOffsetY height strokeStyle lineCap textAlign lineJoin textBaseline lineWidth width
  • 17. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect
  • 18. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect
  • 19. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect
  • 20. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect
  • 27.
  • 28.
  • 29.
  • 30.
  • 31. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo createRadialGradient rect
  • 32.
  • 33.
  • 34. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURL createRadialGradient rect
  • 35.
  • 36.
  • 37.
  • 38. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURL createRadialGradient rect
  • 39.
  • 40.
  • 41. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURL createRadialGradient rect
  • 42.
  • 43.
  • 44.
  • 45. addColorStop drawImage restore arc fill rotate arcTo fillRect save beginPath fillText scale bezierCurveTo getImageData setTransform clearRect isPointInPath stroke clip lineTo strokeRect closePath measureText strokeText createImageData moveTo transform createLinearGradient putImageData translate createPattern quadraticCurveTo toDataURL createRadialGradient rect
  • 46.
  • 47.
  • 48. 3 7 11 Alpha Alpha Alpha 15 19 23 Alpha Alpha Alpha
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 56. VP8 Depends 6.0 4.0 Depends Depends (WebM) H.264 9 beta X Depends 3.1 X (MP4) Ogg Theora X 3.0 3.5 X 10.5 Source: http://en.wikipedia.org/wiki/HTML5_video
  • 57. WAV 9 beta X 3.6 5.1 10.5 MP3 9 beta 6.0 X 5.1 X Ogg Vorbis X 6.0 3.6 X 10.5 Source: http://html5doctor.com/native-audio-in-the-browser/
  • 59.
  • 60.
  • 61.

Notas del editor

  1. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\1 - basic\\index.html
  2. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-SimpleRectangle.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-Rectangles.html
  3. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RectanglesWithCircles.html
  4. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RectanglesWithCircles.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-UsingArcTo.html (Doesn’t work in IE, but good in chrome and firefox)
  5. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-DrawingLines.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-LinesWithCircles.html
  6. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RenderingText.html
  7. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RenderingImages.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-thumbnails.htm
  8. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RenderingVideo.html
  9. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-TransformingText.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-WorkingWithTransforms.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RectanglesWithTransform.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-UnderstandingTransformParameters.html
  10. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-GrayScaleImage.html
  11. C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\01-basics.htmC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\02-fallback.htmC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-thumbnails.htmC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\03-scripted-control.htm