HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307）
•
1 like•1,775 views
2013年7月6日、Webプラットフォーム勉強会 1307で発表したスライドです。 HTML5入門者向けです。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307）
Similar to HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307） (20)
More from Hideki Akiba
More from Hideki Akiba (10)
Recently uploaded
Recently uploaded (9)
HTML5のcanvas2Dアニメーションことはじめ（Webプラットフォーム勉強会 1307）
- 1. 株式会社ツクロア 秋葉秀樹 / 秋葉ちひろ HTML5のcanvas2Dアニメーション ことはじめ HTML5のcanvas2Dでの コマアニメーションの作り方と それを各OSで動かした結果の報告
- 5. デザインや演出の制作 Windows 8(※) Android版Firefox タッチイベントを取得する際はWindows 8または Android版Firefoxでつくることをオススメします
- 8. HTML5 Canvas要素 • ビットマップを動的に生成できる • シンプルな2Dの描画API • Web GLを使った高度な3D表現 • 処理はJavaScriptで行う • CreateJSなどライブラリも便利
- 10. HTML5 Canvas要素 <canvas id="canvas" width="幅" height="高さ"></canvas> <canvas></canvas>
- 11. HTML5 Canvas要素 var canvas = $("#canvas").get(0); var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, 100, 100); DEMO 簡単な図形の描画
- 13. HTML5 Canvas要素 var canvas = $("#canvas").get(0); var ctx = canvas.getContext("2d"); var fish = new Image(); fish.src ="img/fish_img.png"; fish.onload = function () { //画像の読み込み完了 ctx.drawImage(fish, 0, 0); } DEMO 外部アセット画像の読み込みと表示
- 15. HTML5 Canvas要素 var x = 0; fish.onload = function () { //画像の読み込み完了 function draw () { ctx.clearRect(0, 0, 1000, 700); // 画面消去 ctx.setTransform(1, 0, 0, 1, x++, 0); ctx.drawImage(fish, 0, 0); mozRequestAnimationFrame(draw); } draw(); } DEMO フレームアニメーションを実現
- 17. 応用例
- 18. HTML5 Canvas要素 コマアニメーションを実現 var fishdata = [ {x: 0, y: 0, width: 69, height: 37}, {x: 69, y: 0, width: 67, height: 37}, {x: 136, y: 0, width: 67, height: 37}, {x: 0, y: 37, width: 66, height: 37}, {x: 66, y: 37, width: 65, height: 37}, {x: 131, y: 37, width: 66, height: 37}, {x: 0, y: 74, width: 68, height: 37}, {x: 68, y: 74, width: 69, height: 37}, {x: 137, y: 74, width: 69, height: 37}, {x: 0, y: 111, width: 66, height: 37}, {x: 66, y: 111, width: 64, height: 37}, {x: 130, y: 111, width: 62, height: 37}, {x: 192, y: 111, width: 64, height: 37}, {x: 0, y: 148, width: 65, height: 37}, {x: 0, y: 0, width: 69, height: 37}
- 20. アプリUIをデザイン 【 普通の状態】 <body> 【 ドロワー表示中】 <body class="drawerOpen"> JavaScriptによってbodyにクラスを付け替える
- 21. アプリUIをデザイン <body class="drawerOpen"> JavaScriptによってbodyにクラスを付け替える 【CSSだけで動きをつける】 .front { left: 0px; } .drawerOpen .front { left: 160px; }
- 22. Thank you !!!