イナヅマTVログ

2014.10.07
12:46
author: okubo hiroaki
0 comments

[JavaScript] TweenMax / TweenLite rotation 方向(direction)設定

TweenMax, TweenLite を使った回転アニメーションのメモ。

0 -> 180, 180 -> 360 と時計回り回転を分割実行した時 180 -> 360 が逆時計回りになるのを防ぐ。

DirectionalRotationPlugin

DirectionalRotationPlugin を使う方法があるらしい。
github: DirectionalRotationPlugin.js
Continue Reading →

2014.09.29
01:00
author: okubo hiroaki
0 comments

Canvas 2Dライブラリを作ろうとして感じたこととDisplayObject

誰の役にも立たないゴミな記事です。
しかも長い。
ボンクラ脳でせっかくあれこれ考えたので書くけど、読まなくてイイよ。

Canvas API

Canvasはなかなかステキなヤツです。
Flashの代わりにはなれないけど「近い」ことはできそうです。

iOS 8でWebGLも使えるようになり大きな足かせが取れ、ますます可能性が広がってきたと思います。
Continue Reading →

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 →