2014.07.15
11:06
author: taikiken
0件のコメント
オブジェクトの親子関係を作れると作業は楽になります。
Canvas上の描画オブジェクトへDOM element, MovieClipで当たり前に存在する addChild を実装するの巻。
addChildされた子オブジェクトは親オブジェクトから様々な影響を受けます。
位置(x, y)
角度(rotation)
透明度(alpha)
スケール(scale)
何か忘れてないかな…
全て加味された状態で子オブジェクトをレンダリングしないといけません。
続きを読む →
2014.07.14
16:41
author: taikiken
2件のコメント
Canvasに描いた形状に対するマウス(MouseEvent, TouchEvent)操作。
DOM elementやFlash MovieClipなら当たり前にできることをCanvasに実装するのはなかなかの面倒くささです。
Canvas上のオブジェクトにマウス（タッチ）操作を実現する方法は２通りありそうです。
1. DOM element, MovieClipのようにオブジェクトそのものにaddEventListenerできるようにする。
2. ある点(Position)にヒットするオブジェクトを描画が最後のものから配列で返す機能を提供する。
＊他にもあるでしょうか？ご存知の方はお教え下さい。
1の方が扱いやすいですがプログラムが複雑になりそうだったので2の方法で実装を試みました。
three.jsが同様の方法をとっていたというのもあります。
どちらの方法をとるにせよ描画オブジェクトを一括管理する必要があります。
続きを読む →
2014.07.10
11:00
author: taikiken
0件のコメント
いまだに IE 6 の面倒をみてる心優しい開発者です。
IE 8, 7, 6で32bit PNGをフェードさせると画像の周りにジャギーって言うのか黒いボーダーができてしまいます。
背景にべた塗り(background-color)を設定すると回避できるけど、
それならワザワザ32bit PNGなんて使わない。
透明の背景色設定できればどうにかなるかと試してみました。
rgbaは使えないけどGoogle先生に伺うとすぐにステキなお答えが…
続きを読む →
2014.07.06
12:00
author: taikiken
0件のコメント
canvas上に星を描く練習です。
beginPath, closePath 間に星の頂点に対し lineTo することで星型(Star)が描けます。
頂点移動は三角関数を使えば可能です。
可能ですが、ボンクラ脳ではさっぱりなのでGoogle大先生に助けて頂くことにしました。
便利な世の中です。
続きを読む →
2014.07.05
13:41
author: taikiken
0件のコメント
@bit101 Keith 大先生の著書を参考にCanvas練習中です。
「boids + 残像のようなもの」の描画形状を変更できるようにしました。
今までは描画形状（パス）は簡便化を図るためハードコードしていましたが、それは不便なので変更できるようにしました。
元の設計が悪く後方互換を保つようなアップデートができなかったのは残念です。
色々考えていたつもりでしたが甘かったようです。
続きを読む →
2014.07.04
11:30
author: taikiken
0件のコメント
@bit101 Keith 大先生の著書を参考にCanvas練習中です。
回転はすでに何とかなってたので、それにスケール（拡大縮小）とアルファ（透明度）の機能を追加しました。
ActionScript(Flash)では用意されている機能を使うだけなのにCanvasでは自力で何とかしないといけないのは中々つらい…
EaseleJSの劣化版をはるか周回遅れになって作ってるのは分かってる、理解を深めるための課程と言い聞かせてる。
おこがましいけど、DisplayObjectを実装するのは、あらためて「大変だな〜」と感じてます。
skinner先生はやっぱ神ですね。
インタラクティブなとこまではたどりつきたいなぁ〜。
後もう少しだけ…
続きを読む →
2014.07.03
16:31
author: taikiken
1件のコメント
@bit101 Keith 大先生の著書を参考にCanvas練習中です。
「群れるまたはboidsみたいなの」の派生です。
数ステップ前での状態も描画させてみました。
残像効果のようなものです。
2014.06.28
20:15
author: taikiken
0件のコメント
2014.06.26
23:20
author: taikiken
1件のコメント
2014.06.23
11:30
author: taikiken
0件のコメント
JavaScript でドロネー図描き書きの練習中。
参考にさせて頂きました。
slideshare: ドロネー三角形分割
hackist.jp: HTML5のCanvasでボロノイ図をかいてみた
wikipedia: ドロネー図
結局githubのコードを写経しました。
https://github.com/ironwallaby/delaunay
やっと最初の一歩、道は険しい…
