イナヅマTVログ

Firefox 31 Developer tool

2014.08.05
21:43
author: okubo hiroaki
0 comments

Firefox だと Canvas のデバッグがしやすいかも

すっかりメインブラウザをChromeにしてました。
FirefoxでのデバッグがFirebug頼みなのがねぇと敬遠気味でした。

久しぶりにFirefoxを使ってみると標準の「開発ツール」がとても進化していて驚きました。
Firefox 31.0の情報です。
Continue Reading →

2014.07.30
12:25
author: okubo hiroaki
0 comments

[JavaScript] Memo, IE 10, IE 11を判別するnavigatorプロパティ – userAgentを使わずに

メモ、IE 10, IE 11をuserAgentを使わずに判定する方法。
IE 10

var is_ie10 = !!window.navigator.msPointerEnabled;

IE 11

var is_ie11 = !!window.navigator.pointerEnabled;

MSDN: Internet Explorer 10 のポインター イベントとジェスチャ イベント
MSDN: pointerEnabled property

As of Internet Explorer 11, the Microsoft vendor prefixed version of this property (msPointerEnabled) is no longer supported and may be removed in a future release.

ms vendor prefixed を no longer supported なので判定可能らしい。

[JavaScript] IE 11ブラウザ判定方法のuserAgentを無理矢理ゴニョゴニョするより良さげな様子。

swiper.jsソースコードで知りました。
Continue Reading →

inazumatv (4)

2014.07.22
11:00
author: okubo hiroaki
0 comments

【Canvas練習ノート】CanvasをPNG画像ダウンロード – toBlobとsaveAs

canvasをPNG画像へキャプチャしダウンロード。

PNG画像へのキャプチャは canvas.toBlob を使います。
ダウンロードは FileSystem API で行います。

canvas.toBlob

HTMLCanvasElement のメソッド toBlob は Blobオブジェクト(画像)を返してくれます。
ただ残念なことに Firefox しかサポートしておらず、polyfill メソッドを用意する必要があります。
Continue Reading →

line_circle_intercect

2014.07.20
19:09
author: okubo hiroaki
0 comments

【Canvas練習ノート】線(Line)と円(Circle)の当たり判定

線と円の当たりというか衝突というか交差したかどうかを判定してたい。

ActionScript だと hitTest が使えたのでコツコツと自力で判定コードを書くのは始めてかも。
色々良くわかってないので、なんだかとっても大変だった。
Continue Reading →

line_drag

2014.07.19
16:44
author: okubo hiroaki
0 comments

【Canvas練習ノート】線(Line)を描く

Canvas練習中。
線を描いてみる。

線は beginPath から closePath の間に lineTo すれば描けます。

描けますが、起点と終点情報をどのように保持するかでは悩みました。
線(Line)に回転機能を持たせるか否かでも考えました。

ActionScript Flex の Line はかなりの豪華仕様です。

大変そうなので回転機能は無しにし起点と終点は描画基底クラスのObject2Dを与えることにしました。
起点a, 終点bが移動しても追随し線を描くことができると考えたからです。
three.js Lineの劣化版を作ることにしました。
Continue Reading →

addchild

2014.07.15
11:06
author: okubo hiroaki
0 comments

【Canvas練習ノート】親子関係(addChild)

オブジェクトの親子関係を作れると作業は楽になります。

Canvas上の描画オブジェクトへDOM element, MovieClipで当たり前に存在する addChild を実装するの巻。

addChildされた子オブジェクトは親オブジェクトから様々な影響を受けます。
位置(x, y)
角度(rotation)
透明度(alpha)
スケール(scale)
何か忘れてないかな…
全て加味された状態で子オブジェクトをレンダリングしないといけません。
Continue Reading →

drag

2014.07.14
16:41
author: okubo hiroaki
1 Comment

【Canvas練習ノート】マウス(タッチ)操作 – ドラッグとか

Canvasに描いた形状に対するマウス(MouseEvent, TouchEvent)操作。
DOM elementやFlash MovieClipなら当たり前にできることをCanvasに実装するのはなかなかの面倒くささです。

Canvas上のオブジェクトにマウス(タッチ)操作を実現する方法は2通りありそうです。
1. DOM element, MovieClipのようにオブジェクトそのものにaddEventListenerできるようにする。
2. ある点(Position)にヒットするオブジェクトを描画が最後のものから配列で返す機能を提供する。
*他にもあるでしょうか?ご存知の方はお教え下さい。

1の方が扱いやすいですがプログラムが複雑になりそうだったので2の方法で実装を試みました。
three.jsが同様の方法をとっていたというのもあります。

どちらの方法をとるにせよ描画オブジェクトを一括管理する必要があります。
Continue Reading →