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.
iOSプログラマへ。HTML5 Canvas がおもしろい!DOTAPON Software@cocoponhttp://dotapon.sakura.ne.jp
こんにちは!                  @cocopon                  趣味でアプリ開発・デザインやってます日記ソフト Osciroi        関数電卓 Calqum              Tiny iOS...
本題
Canvas要素とは            “     The canvas element provides scripts with a                  resolution-dependent bitmap canvas...
例えば、こんなものが作れます                                  Tiny iOShttp://www.dotapon.sakura.ne.jp/apps/tiny_ios/
何がいいの? (1)“それなりに” マルチプラットフォーム互換性に気をつけてがんばれば、•   iOSでも動く•   PCのモダンブラウザでも動く•   新しめのAndroidでも動く
何がいいの? (2)Core Graphics にそっくり、iOSアプリ開発の経験が活かせる!
何がいいの? (2)Core Graphics にそっくり、iOSアプリ開発の経験が活かせる!   i O S プ ロ グ ラ マ 大 歓 喜 !
なぜ そっくり なのか                                              from Wikipedia     AppleのDashboard Widgetsが起源だからさ!http://en.wikip...
というわけで…iOSアプリ開発経験を活かして、Webでグリグリ動くものを作ろう!
今日の目標• HTML5 Canvasに触れてもらう• 「iOSと同じじゃん?」と感じてもらう• 「俺もいけるじゃん!」と感じてもらう
つくってみよう
Canvas入門キット HTML5 Canvas 入門キット  http://goo.gl/bf5q9     後ほど使いますので、    ダウンロードしておいてね!
描画のキホン
コンテキストを取得する                描くときに必要なモノです         Canvas                            iOS                               CGCont...
四角を描く                      stroke/fillRect                            (x, y)                                        h      ...
ちょいと複雑な図形を描く   いくつか準備が必要です  はじめる   beginPath         moveTo/lineTo/arc/  線を足す         bezierCurveTo...  閉じる    closePath  ...
線を描く                      moveTo/lineTo                                   (x2, y2)               (x1, y1)         Canvas  ...
円を描く                                  arc                              r                                   (x, y)         ...
色を変える                   strokeStyle, fillStyle         Canvas                            iOS// 線の色                         ...
画像を描く                        drawImage                 (dx, dy)                                            img, canvas, vi...
練習1. 図形を描いてみる CanvasStarterKit/practices/practice1
入力
マウス・タッチのイベント マウスイベント     タッチイベント mousedown   touchdown mousemove   touchmove  mouseup     touchup  この2つをうまく抽象化すれば、 PCでもタッチ...
InputManager.prototype.attach = function() {!    var me = this;!    var supportsTouch = (window[Touch] !== undefined);!   ...
練習2. お絵描きアプリを     作ってみるCanvasStarterKit/practices/practice2
さいごに
さらに上を目指すあなたへ context.toDataURL(...) 画像データをURIの文字列 “data:mime/type;...” に変換する context.getImageData(...) RGBAのバイト列で表現した画像データ...
さんこうCanvasリファレンス - HTML5.JPhttp://www.html5.jp/canvas/ref.html超オススメ。Canvasの情報は、ほぼここで事足りる。HTML Canvas 2D Contexthttp://dev....
Coming Soon...?
iOSプログラマへ。HTML5 Canvas がおもしろい!                 DOTAPON Software                       @cocopon        http://dotapon.sakur...
Upcoming SlideShare
Loading in …5
×

iOSプログラマへ。HTML5 Canvasがおもしろい!

16,833 views

Published on

  • Be the first to comment

iOSプログラマへ。HTML5 Canvasがおもしろい!

  1. 1. iOSプログラマへ。HTML5 Canvas がおもしろい!DOTAPON Software@cocoponhttp://dotapon.sakura.ne.jp
  2. 2. こんにちは! @cocopon 趣味でアプリ開発・デザインやってます日記ソフト Osciroi 関数電卓 Calqum Tiny iOS http://dotapon.sakura.ne.jp
  3. 3. 本題
  4. 4. Canvas要素とは “ The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be ” used for rendering graphs, game graphics, or other visual images on the fly. グラフやゲームに使える ビットマップキャンバスhttp://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element
  5. 5. 例えば、こんなものが作れます Tiny iOShttp://www.dotapon.sakura.ne.jp/apps/tiny_ios/
  6. 6. 何がいいの? (1)“それなりに” マルチプラットフォーム互換性に気をつけてがんばれば、• iOSでも動く• PCのモダンブラウザでも動く• 新しめのAndroidでも動く
  7. 7. 何がいいの? (2)Core Graphics にそっくり、iOSアプリ開発の経験が活かせる!
  8. 8. 何がいいの? (2)Core Graphics にそっくり、iOSアプリ開発の経験が活かせる! i O S プ ロ グ ラ マ 大 歓 喜 !
  9. 9. なぜ そっくり なのか from Wikipedia AppleのDashboard Widgetsが起源だからさ!http://en.wikipedia.org/wiki/Canvas_element
  10. 10. というわけで…iOSアプリ開発経験を活かして、Webでグリグリ動くものを作ろう!
  11. 11. 今日の目標• HTML5 Canvasに触れてもらう• 「iOSと同じじゃん?」と感じてもらう• 「俺もいけるじゃん!」と感じてもらう
  12. 12. つくってみよう
  13. 13. Canvas入門キット HTML5 Canvas 入門キット http://goo.gl/bf5q9 後ほど使いますので、 ダウンロードしておいてね!
  14. 14. 描画のキホン
  15. 15. コンテキストを取得する 描くときに必要なモノです Canvas iOS CGContextRef context =var context = UIGraphicsGetCurrentContext(canvasElem.getContext(‘2d’); );
  16. 16. 四角を描く stroke/fillRect (x, y) h w Canvas iOS// 枠線のみ // 枠線のみcontext.strokeRect(x, y, w, CGContextStrokeRect(context,h); rect);// 塗りつぶし // 塗りつぶしcontext.fillRect(x, y, w, CGContextFillRect(context,h); rect);
  17. 17. ちょいと複雑な図形を描く いくつか準備が必要です はじめる beginPath moveTo/lineTo/arc/ 線を足す bezierCurveTo... 閉じる closePath 描く stroke/fill
  18. 18. 線を描く moveTo/lineTo (x2, y2) (x1, y1) Canvas iOS CGContextMoveToPoint(context , x1, y1);context.moveTo(x1, y1); CGContextAddLineToPoint(contcontext.lineTo(x2, y2); ext, x2, y2);context.stroke(); CGContextStrokePath(context) ;
  19. 19. 円を描く arc r (x, y) Canvas iOScontext.arc(x, y, r, 0, CGContextAddArc(context, x,Math.PI * 2, y, r, 0, M_PI * 2,counterClockwise); clockWise);context.fill(); CGContextFillPath(context);// counterClockwise = true: // clockWise = 1: 時計まわり,反時計まわり, // 1以外: 反時計まわり// false: 時計まわり
  20. 20. 色を変える strokeStyle, fillStyle Canvas iOS// 線の色 // 線の色context.strokeStyle = CGContextSetStrokeColorWithC‘#000’; olor(context, color);// 塗りつぶしの色 // 塗りつぶしの色context.fillStyle = CGContextSetFillColorWithCol‘rgba(255, 0, 0, 0.5)’; or(context, color);
  21. 21. 画像を描く drawImage (dx, dy) img, canvas, video要素の dh 中身を描画できます dw Canvas iOScontext.drawImage(image, dx, CGContextDrawImage(context,dy, dw, dh); rect, image);
  22. 22. 練習1. 図形を描いてみる CanvasStarterKit/practices/practice1
  23. 23. 入力
  24. 24. マウス・タッチのイベント マウスイベント タッチイベント mousedown touchdown mousemove touchmove mouseup touchup この2つをうまく抽象化すれば、 PCでもタッチな端末でも使える!
  25. 25. InputManager.prototype.attach = function() {! var me = this;! var supportsTouch = (window[Touch] !== undefined);! if (supportsTouch) {入力イベントの抽象化! ! me.listeners_ = [! ! ! {! ! ! ! type: touchstart,! ! ! ! element: me.canvas_,! ! ! ! handler: $.proxy(me.onBrowserTouchDown_, me)! ! ! }, {! ! ! ! type: touchmove,! ! ! ! element: me.canvas_,! ! ! ! handler: $.proxy(me.onBrowserTouchMove_, me)! ! ! }, {! ! ! ! type: touchend,! ! ! ! element: me.canvas_,! ! ! ! handler: $.proxy(me.onBrowserTouchUp_, me)! ! ! }! ! ];! }! else {! ! me.listeners_ = [! ! ! {! ! ! ! type: mousedown,! ! ! ! element: me.canvas_,!!! 詳細は、入門キットの ! ! ! ! ! ! ! }, { ! handler: $.proxy(me.onBrowserMouseDown_, me) type: mousemove,inputmanager.jsをチェック!!!! ! ! ! ! ! ! ! ! }, { element: $(document), handler: $.proxy(me.onBrowserMouseMove_, me)! ! ! ! type: mouseup,! ! ! ! element: $(document),! ! ! ! handler: $.proxy(me.onBrowserMouseUp_, me)! ! ! }! ! ];! }! $.each(me.listeners_, function(index, listener) {! ! listener.element.on(listener.type, listener.handler);! });};/** * Detach mouse/touch events from the related canvas element. */InputManager.prototype.detach = function() {
  26. 26. 練習2. お絵描きアプリを 作ってみるCanvasStarterKit/practices/practice2
  27. 27. さいごに
  28. 28. さらに上を目指すあなたへ context.toDataURL(...) 画像データをURIの文字列 “data:mime/type;...” に変換する context.getImageData(...) RGBAのバイト列で表現した画像データを取得する context.putImageData(...) RGBAのバイト列で表現された画像を設定する
  29. 29. さんこうCanvasリファレンス - HTML5.JPhttp://www.html5.jp/canvas/ref.html超オススメ。Canvasの情報は、ほぼここで事足りる。HTML Canvas 2D Contexthttp://dev.w3.org/html5/2dcontext/本家の資料。ただし、各ブラウザでサポートしているかどうかは、使ってみないとわからない。
  30. 30. Coming Soon...?
  31. 31. iOSプログラマへ。HTML5 Canvas がおもしろい! DOTAPON Software @cocopon http://dotapon.sakura.ne.jp

×