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

15,646 views
15,486 views

Published on

0 Comments
41 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,646
On SlideShare
0
From Embeds
0
Number of Embeds
7,467
Actions
Shares
0
Downloads
63
Comments
0
Likes
41
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×