1. iOSプログラマへ。
HTML5 Canvas がおもしろい！
DOTAPON Software
@cocopon
http://dotapon.sakura.ne.jp

2. こんにちは！
@cocopon
趣味でアプリ開発・デザインやってます
日記ソフト Osciroi 関数電卓 Calqum Tiny iOS
http://dotapon.sakura.ne.jp

3. 本題

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. 例えば、こんなものが作れます
Tiny iOS
http://www.dotapon.sakura.ne.jp/apps/tiny_ios/

6. 何がいいの？ (1)
“それなりに” マルチプラットフォーム
互換性に気をつけてがんばれば、
• iOSでも動く
• PCのモダンブラウザでも動く
• 新しめのAndroidでも動く

7. 何がいいの？ (2)
Core Graphics にそっくり、
iOSアプリ開発の経験が活かせる！

8. 何がいいの？ (2)
Core Graphics にそっくり、
iOSアプリ開発の経験が活かせる！
i O S プ ロ グ ラ マ 大 歓 喜 ！

9. なぜ そっくり なのか
from Wikipedia
AppleのDashboard Widgetsが起源だからさ！
http://en.wikipedia.org/wiki/Canvas_element

10. というわけで…
iOSアプリ開発経験を活かして、
Webでグリグリ動くものを作ろう！

11. 今日の目標
• HTML5 Canvasに触れてもらう
• 「iOSと同じじゃん？」と感じてもらう
• 「俺もいけるじゃん！」と感じてもらう

12. つくってみよう

13. Canvas入門キット
HTML5 Canvas 入門キット
http://goo.gl/bf5q9
後ほど使いますので、
ダウンロードしておいてね！

14. 描画のキホン

15. コンテキストを取得する
描くときに必要なモノです
Canvas iOS
CGContextRef context =
var context =
UIGraphicsGetCurrentContext(
canvasElem.getContext(‘2d’);
);

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. ちょいと複雑な図形を描く
いくつか準備が必要です
はじめる beginPath
moveTo/lineTo/arc/
線を足す
bezierCurveTo...
閉じる closePath
描く stroke/fill

18. 線を描く
moveTo/lineTo
(x2, y2)
(x1, y1)
Canvas iOS
CGContextMoveToPoint(context
, x1, y1);
context.moveTo(x1, y1);
CGContextAddLineToPoint(cont
context.lineTo(x2, y2);
ext, x2, y2);
context.stroke();
CGContextStrokePath(context)
;

19. 円を描く
arc
r
(x, y)
Canvas iOS
context.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. 色を変える
strokeStyle, fillStyle
Canvas iOS
// 線の色 // 線の色
context.strokeStyle = CGContextSetStrokeColorWithC
‘#000’; olor(context, color);
// 塗りつぶしの色 // 塗りつぶしの色
context.fillStyle = CGContextSetFillColorWithCol
‘rgba(255, 0, 0, 0.5)’; or(context, color);

21. 画像を描く
drawImage
(dx, dy)
img, canvas, video要素の
dh
中身を描画できます
dw
Canvas iOS
context.drawImage(image, dx, CGContextDrawImage(context,
dy, dw, dh); rect, image);

22. 練習1. 図形を描いてみる
CanvasStarterKit/practices/practice1

23. 入力

24. マウス・タッチのイベント
マウスイベント タッチイベント
mousedown touchdown
mousemove touchmove
mouseup touchup
この2つをうまく抽象化すれば、
PCでもタッチな端末でも使える！

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. 練習2. お絵描きアプリを
作ってみる
CanvasStarterKit/practices/practice2

27. さいごに

28. さらに上を目指すあなたへ
context.toDataURL(...)
画像データをURIの文字列 “data:mime/type;...” に変換する
context.getImageData(...)
RGBAのバイト列で表現した画像データを取得する
context.putImageData(...)
RGBAのバイト列で表現された画像を設定する

29. さんこう
Canvasリファレンス - HTML5.JP
http://www.html5.jp/canvas/ref.html
超オススメ。
Canvasの情報は、ほぼここで事足りる。
HTML Canvas 2D Context
http://dev.w3.org/html5/2dcontext/
本家の資料。
ただし、各ブラウザでサポートしているかどうかは、
使ってみないとわからない。

30. Coming Soon...?

31. iOSプログラマへ。
HTML5 Canvas がおもしろい！
DOTAPON Software
@cocopon
http://dotapon.sakura.ne.jp