iOSプログラマへ。HTML5 Canvasがおもしろい!
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 14,967 views

 

Statistics

Views

Total Views
14,967
Views on SlideShare
7,798
Embed Views
7,169

Actions

Likes
40
Downloads
59
Comments
0

11 Embeds 7,169

http://www.dotapon.sakura.ne.jp 6999
https://twitter.com 84
http://hihu.tumblr.com 71
http://www.feedspot.com 6
http://webcache.googleusercontent.com 3
http://hatebutv.com 1
https://si0.twimg.com 1
http://tweetedtimes.com 1
http://twitter.com 1
http://cloud.feedly.com 1
http://feedly.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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がおもしろい! iOSプログラマへ。HTML5 Canvasがおもしろい! Presentation Transcript

  • iOSプログラマへ。HTML5 Canvas がおもしろい!DOTAPON Software@cocoponhttp://dotapon.sakura.ne.jp
  • こんにちは! @cocopon 趣味でアプリ開発・デザインやってます日記ソフト Osciroi 関数電卓 Calqum Tiny iOS http://dotapon.sakura.ne.jp
  • 本題
  • 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
  • 例えば、こんなものが作れます 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.wikipedia.org/wiki/Canvas_element
  • というわけで…iOSアプリ開発経験を活かして、Webでグリグリ動くものを作ろう!
  • 今日の目標• HTML5 Canvasに触れてもらう• 「iOSと同じじゃん?」と感じてもらう• 「俺もいけるじゃん!」と感じてもらう
  • つくってみよう
  • Canvas入門キット HTML5 Canvas 入門キット http://goo.gl/bf5q9 後ほど使いますので、 ダウンロードしておいてね!
  • 描画のキホン
  • コンテキストを取得する 描くときに必要なモノです Canvas iOS CGContextRef context =var context = UIGraphicsGetCurrentContext(canvasElem.getContext(‘2d’); );
  • 四角を描く 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);
  • ちょいと複雑な図形を描く いくつか準備が必要です はじめる beginPath moveTo/lineTo/arc/ 線を足す bezierCurveTo... 閉じる closePath 描く stroke/fill
  • 線を描く 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) ;
  • 円を描く 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: 時計まわり
  • 色を変える strokeStyle, fillStyle Canvas iOS// 線の色 // 線の色context.strokeStyle = CGContextSetStrokeColorWithC‘#000’; olor(context, color);// 塗りつぶしの色 // 塗りつぶしの色context.fillStyle = CGContextSetFillColorWithCol‘rgba(255, 0, 0, 0.5)’; or(context, color);
  • 画像を描く drawImage (dx, dy) img, canvas, video要素の dh 中身を描画できます dw Canvas iOScontext.drawImage(image, dx, CGContextDrawImage(context,dy, dw, dh); rect, image);
  • 練習1. 図形を描いてみる CanvasStarterKit/practices/practice1
  • 入力
  • マウス・タッチのイベント マウスイベント タッチイベント mousedown touchdown mousemove touchmove mouseup touchup この2つをうまく抽象化すれば、 PCでもタッチな端末でも使える!
  • 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() {
  • 練習2. お絵描きアプリを 作ってみるCanvasStarterKit/practices/practice2
  • さいごに
  • さらに上を目指すあなたへ context.toDataURL(...) 画像データをURIの文字列 “data:mime/type;...” に変換する context.getImageData(...) RGBAのバイト列で表現した画像データを取得する context.putImageData(...) RGBAのバイト列で表現された画像を設定する
  • さんこうCanvasリファレンス - HTML5.JPhttp://www.html5.jp/canvas/ref.html超オススメ。Canvasの情報は、ほぼここで事足りる。HTML Canvas 2D Contexthttp://dev.w3.org/html5/2dcontext/本家の資料。ただし、各ブラウザでサポートしているかどうかは、使ってみないとわからない。
  • Coming Soon...?
  • iOSプログラマへ。HTML5 Canvas がおもしろい! DOTAPON Software @cocopon http://dotapon.sakura.ne.jp