Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Canvas tutorial

965 views

Published on

canvasアニメーションのチュートリアル
2015/02/12(木) 19:00〜
LIG・SHIFTBRAIN・Uniba合同LT会 : 別冊ライトニングトーク Vol. 1にて

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 見れました!ありがとうございます。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Canvas tutorial

  1. 1. Canvas Animation
  2. 2. tsukasa SHIFTBRAIN frontend developer oneslocus tsukasa-web locus-dw.com/blog
  3. 3. Canvas?
  4. 4. <canvas></canvas>
  5. 5. <canvas></canvas>
  6. 6. fillRect arc+fill
  7. 7. drawImage shadowBlur
  8. 8. fillText <見えないニャン
  9. 9. clearRect ア ッ
  10. 10. Animation?
  11. 11. fillRect x=0,y=0
  12. 12. clearRect
  13. 13. fillRect x=30,y=0
  14. 14. 消して描いての繰り返し 場合によっては消さずに 上書きしても大丈夫
  15. 15. ⃝⃝だけClearはできない。 消したいなら次Drawしなければいい。
  16. 16. Clear and Draw
  17. 17. setTimeout requestAnimationFrame
  18. 18. requestAnimationFrame • ブラウザ側でアニメーションが更新できる準備が整っ たときに実行 • 別タブに移っても大量にスタックされない • 完全な間隔調整はできない • fpsは経過時間を用いてある程度操作可能
  19. 19. https://github.com/tsukasa-web/myFuncs_coffee/blob/master/ RAFhandler.coffee RAFhandler
  20. 20. Easing Function
  21. 21. http://gizma.com/easing/
  22. 22. Math.easeInQuad  =  function(t,b,c,d){     t  /=  d;     return  c*t*t  +  b;   }; • t = 今の時間 • b = アニメーション開始時の値 • c = アニメーション終了時の値 • d = アニメーションの長さ
  23. 23. Use $.animate or Tween Engine
  24. 24. $(変数).stop().animate({x:100}, {
 duration: duration
 easing: easing
 progress: 処理関数
 }) progressはstepでもOK stepはプロパティ毎に、progressはプロパティの数に 関係なくアニメーション要素毎に一度だけ呼び出される
  25. 25. 合成処理やアルファ値の設定、 画像の描画領域の設定など、色んな処理の組み合わせで 自由にアニメーションを作ってみよう!
  26. 26. Optimization
  27. 27. 拡大縮小しないシェイプやテキストを使い回すなら 画像としてキャッシュしよう シェイプ ビットマップ .toDataURLなど 描くメソッド 描くメソッド arc+fill drawImage 軽い重い
  28. 28. 描画する数は少ない方がいい。 つまり、グループ化できるものは画像化しちゃおう 画像化 軽い重い ニャン 4回も描画してる ニャン 1回の描画で済む
  29. 29. • 大量のオブジェクトを管理するのが大変 • マウスイベント等のイベント管理が面倒… スクラッチで書くと容量が軽く済む。 けど面倒なことも多い。
  30. 30. Library
  31. 31. EASEL JS 一番ベーシックで使いやすい。
  32. 32. • レイヤーのように管理できる • フィルターが便利!(重いのもあるで使い方に注意) • webGLモード搭載(制限が多い)、 requestAnimationFrame設定もお手のもの • Tween.jsやPreload.jsも便利だよ!(個別に使っても 便利だよ!) • プラグインを含め、とにかく多機能 • 先日の大型アップデートで結構かゆいとこに手が届 くように
  33. 33. pixi.js 先日のCreateJS勉強会で実力が広まったライブラリ。 2D+webGLが得意。グラフィックの描画が少し苦手?
  34. 34. • レイヤーのように管理できる • フィルターが便利!(重いのもあるで使い方に注意) • webGLモード搭載(制限は少ない模様) • アニメーション周りは自分で書く • かなり滑らか
  35. 35. 得意分野を見極め、使い分ける(両方使うのもアリ)ことで 超ぬるぬるアニメーションが実現できる 共通して言えることはSpriteSheetとcacheが 高速化のキーになる。
  36. 36. • http://www.goodboydigital.com/pixijs/examples/3/ • http://ics-web.jp/projects/shared-drawing/
  37. 37. Use Library or Scratch
  38. 38. example
  39. 39. • http://devjam.net/demo/snowsample_01/ • http://devjam.net/demo/filmsample_02/ • http://devjam.net/demo/splitsample_02/ • http://devjam.net/demo/gradientsample_02/
  40. 40. DEVJAM http://devjam.net/about

×