Html5 Canvas and Media

1,011 views
927 views

Published on

HTML 5 Canvas and Media

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

  • Be the first to like this

No Downloads
Views
Total views
1,011
On SlideShare
0
From Embeds
0
Number of Embeds
270
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\1 - basic\\index.html
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-SimpleRectangle.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-Rectangles.html
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RectanglesWithCircles.html
  • 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)
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-DrawingLines.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-LinesWithCircles.html
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RenderingText.html
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RenderingImages.htmlC:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-thumbnails.htm
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-RenderingVideo.html
  • 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
  • C:\\Users\\Suresh.Balla\\Desktop\\Win8\\Html5Demos\\2 - advanced\\C-GrayScaleImage.html
  • 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
  • Html5 Canvas and Media

    1. 1. Games Multimedia AppsCharting
    2. 2. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTocreateRadialGradient rect
    3. 3. data miterLimitfillStyle shadowBlurfont shadowColorglobalAlpha shadowOffsetXglobalCompositeOperation shadowOffsetYheight strokeStylelineCap textAlignlineJoin textBaselinelineWidth width
    4. 4. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTocreateRadialGradient rect
    5. 5. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTocreateRadialGradient rect
    6. 6. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTocreateRadialGradient rect
    7. 7. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTocreateRadialGradient rect
    8. 8. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTocreateRadialGradient rect
    9. 9. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTocreateRadialGradient rect
    10. 10. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTo toDataURLcreateRadialGradient rect
    11. 11. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTo toDataURLcreateRadialGradient rect
    12. 12. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTo toDataURLcreateRadialGradient rect
    13. 13. addColorStop drawImage restorearc fill rotatearcTo fillRect savebeginPath fillText scalebezierCurveTo getImageData setTransformclearRect isPointInPath strokeclip lineTo strokeRectclosePath measureText strokeTextcreateImageData moveTo transformcreateLinearGradient putImageData translatecreatePattern quadraticCurveTo toDataURLcreateRadialGradient rect
    14. 14. 3 7 11Alpha Alpha Alpha 15 19 23Alpha Alpha Alpha
    15. 15. http://mirovideoconverter.com/
    16. 16. 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.5Source: http://en.wikipedia.org/wiki/HTML5_video
    17. 17. 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.5Source: http://html5doctor.com/native-audio-in-the-browser/
    18. 18. Encode in multipleformats
    19. 19. Suresh.Balla@neudesic.com

    ×