イナヅマTVログ

inazumatv (4)

2014 年 7 月 22 日
11:00 AM
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 年 7 月 20 日
7:09 PM
author: okubo hiroaki
0 comments

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

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

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

line_drag

2014 年 7 月 19 日
4:44 PM
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 年 7 月 15 日
11:06 AM
author: okubo hiroaki
0 comments

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

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

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

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

drag

2014 年 7 月 14 日
4:41 PM
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 →

2014 年 7 月 10 日
11:00 AM
author: okubo hiroaki
0 comments

[JavaScript] Memo, IE 8, 7, 6で32bit PNG Fade時の黒いボーダーを回避したい

いまだに IE 6 の面倒をみてる心優しい開発者です。

IE 8, 7, 6で32bit PNGをフェードさせると画像の周りにジャギーって言うのか黒いボーダーができてしまいます。
背景にべた塗り(background-color)を設定すると回避できるけど、
それならワザワザ32bit PNGなんて使わない。

透明の背景色設定できればどうにかなるかと試してみました。
rgbaは使えないけどGoogle先生に伺うとすぐにステキなお答えが…
Continue Reading →

星

2014 年 7 月 6 日
12:00 PM
author: okubo hiroaki
0 comments

【Canvas練習ノート】星(Star)を描く

canvas上に星を描く練習です。

beginPath, closePath 間に星の頂点に対し lineTo することで星型(Star)が描けます。
頂点移動は三角関数を使えば可能です。
可能ですが、ボンクラ脳ではさっぱりなのでGoogle大先生に助けて頂くことにしました。
便利な世の中です。
Continue Reading →

boids

2014 年 7 月 5 日
1:41 PM
author: okubo hiroaki
0 comments

【Canvas練習ノート】boids + 残像のようなもの – 2(形状変更:円)

@bit101 Keith 大先生の著書を参考にCanvas練習中です。
boids + 残像のようなもの」の描画形状を変更できるようにしました。

今までは描画形状(パス)は簡便化を図るためハードコードしていましたが、それは不便なので変更できるようにしました。
元の設計が悪く後方互換を保つようなアップデートができなかったのは残念です。

色々考えていたつもりでしたが甘かったようです。
Continue Reading →

回転、拡大縮小、透明度

2014 年 7 月 4 日
11:30 AM
author: okubo hiroaki
0 comments

【Canvas練習ノート】回転と拡大縮小と透明度

@bit101 Keith 大先生の著書を参考にCanvas練習中です。

回転はすでに何とかなってたので、それにスケール(拡大縮小)とアルファ(透明度)の機能を追加しました。
ActionScript(Flash)では用意されている機能を使うだけなのにCanvasでは自力で何とかしないといけないのは中々つらい…

EaseleJSの劣化版をはるか周回遅れになって作ってるのは分かってる、理解を深めるための課程と言い聞かせてる。
おこがましいけど、DisplayObjectを実装するのは、あらためて「大変だな〜」と感じてます。

skinner先生はやっぱ神ですね。

インタラクティブなとこまではたどりつきたいなぁ〜。
後もう少しだけ…
Continue Reading →