Satoshi Ueyama




2009   5   31
2009   5   31
Canvas


                Javascript




                        •
                        •
                        •    D...
Twitter bot




                Twitter




2009   5   31
Twitter bot




2009   5   31
Canvas?


           •        Google App Engine

                •
                •




2009   5   31
Canvas?

           •    Google App Engine

                •
                •          API




2009   5   31
Canvas?

           •    Google App Engine

                •
                •          API




2009   5   31
Canvas?

           •
           •
           •    ImageMagick




2009   5   31
Canvas?
           •
                Flash


           •
           •
           •
           •
2009   5   31
2009   5   31
2009   5   31
•
           •
           •    ……




                 excanvas



2009   5   31
IE      Canvas
           •    IE   Acid2

           •
           •




2009   5   31
2009   5   31
3D on 2D Canvas


                     Adobe MAX 2009




                Canvas                ……
                     3D...
3D on 2D Canvas
                    2D Context      3D




                http://gyu.que.jp/jscloth/




2009   5   31
Canvas 2D API


       texture

                                 • save
                                  • transform
    ...
Canvas 2D API




                                • save
                                 • transform
                    ...
Canvas 2D API




                                • save
                                 • transform
                    ...
Canvas 2D API




                                • save
                                 • transform
                    ...
Canvas 2D API




                                • save
                                 • transform
                    ...
js touch




2009   5   31
js touch

           •
           •
           •




2009   5   31
Canvas 2D API




           •
           •    Flash10, Direct3D, OpenGL

           •    Canvas !        2D API       …

...
2009   5   31
• Opera 3D Canvas
                • Mozilla 3D Canvas
                • Google O3D
2009   5   31
Opera 3D Canvas


           •
           •                          API


                Opera Labs




2009   5   31
2009   5   31
Opera 3D Canvas
                    js touch




2009   5   31
Opera 3D Canvas
                    js touch




2009   5   31
Opera 3D Canvas




2009   5   31
O3D

           •      (IE, Firefox, Safari Chrome)

           •                API

           •    Canvas            ob...
2009   5   31
O3D



2009   5   31
Gecko 3D Canvas


           •    Firefox 3.5

           •    OpenGL ES 2.0    JS




2009   5   31
2009   5   31
Firefox 3D Canvas


                •   OpenGL ES

                •                                   ……




2009   5   31
• Opera
                • Gecko
                • O3D     …




2009   5   31
Thank You.


                Canvas



                     3D Canvas




2009   5   31
Upcoming SlideShare
Loading in …5
×

Mozilla Party 2009 Canvas Programming

1,857
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,857
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mozilla Party 2009 Canvas Programming

  1. 1. Satoshi Ueyama 2009 5 31
  2. 2. 2009 5 31
  3. 3. Canvas Javascript • • • DIV 2009 5 31
  4. 4. Twitter bot Twitter 2009 5 31
  5. 5. Twitter bot 2009 5 31
  6. 6. Canvas? • Google App Engine • • 2009 5 31
  7. 7. Canvas? • Google App Engine • • API 2009 5 31
  8. 8. Canvas? • Google App Engine • • API 2009 5 31
  9. 9. Canvas? • • • ImageMagick 2009 5 31
  10. 10. Canvas? • Flash • • • • 2009 5 31
  11. 11. 2009 5 31
  12. 12. 2009 5 31
  13. 13. • • • …… excanvas 2009 5 31
  14. 14. IE Canvas • IE Acid2 • • 2009 5 31
  15. 15. 2009 5 31
  16. 16. 3D on 2D Canvas Adobe MAX 2009 Canvas …… 3D 2009 5 31
  17. 17. 3D on 2D Canvas 2D Context 3D http://gyu.que.jp/jscloth/ 2009 5 31
  18. 18. Canvas 2D API texture • save • transform • clip path • restore canvas 2009 5 31
  19. 19. Canvas 2D API • save • transform • clip path • restore canvas 2009 5 31
  20. 20. Canvas 2D API • save • transform • clip path • restore canvas 2009 5 31
  21. 21. Canvas 2D API • save • transform • clip path • restore canvas 2009 5 31
  22. 22. Canvas 2D API • save • transform • clip path • restore canvas 2009 5 31
  23. 23. js touch 2009 5 31
  24. 24. js touch • • • 2009 5 31
  25. 25. Canvas 2D API • • Flash10, Direct3D, OpenGL • Canvas ! 2D API … 2009 5 31
  26. 26. 2009 5 31
  27. 27. • Opera 3D Canvas • Mozilla 3D Canvas • Google O3D 2009 5 31
  28. 28. Opera 3D Canvas • • API Opera Labs 2009 5 31
  29. 29. 2009 5 31
  30. 30. Opera 3D Canvas js touch 2009 5 31
  31. 31. Opera 3D Canvas js touch 2009 5 31
  32. 32. Opera 3D Canvas 2009 5 31
  33. 33. O3D • (IE, Firefox, Safari Chrome) • API • Canvas object 2009 5 31
  34. 34. 2009 5 31
  35. 35. O3D 2009 5 31
  36. 36. Gecko 3D Canvas • Firefox 3.5 • OpenGL ES 2.0 JS 2009 5 31
  37. 37. 2009 5 31
  38. 38. Firefox 3D Canvas • OpenGL ES • …… 2009 5 31
  39. 39. • Opera • Gecko • O3D … 2009 5 31
  40. 40. Thank You. Canvas 3D Canvas 2009 5 31
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×