Más contenido relacionado La actualidad más candente (19) Similar a iOSプログラマへ。HTML5 Canvasがおもしろい! (20) iOSプログラマへ。HTML5 Canvasがおもしろい!2. こんにちは!
@cocopon
趣味でアプリ開発・デザインやってます
日記ソフト Osciroi 関数電卓 Calqum Tiny iOS
http://dotapon.sakura.ne.jp
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/
9. なぜ そっくり なのか
from Wikipedia
AppleのDashboard Widgetsが起源だからさ!
http://en.wikipedia.org/wiki/Canvas_element
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);
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() {
Notas del editor \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