仕様はPDF形式で２ページあります
canvasflash
■バージョン5.8(2012-06-02) 追加点 ・canvasClassにgetMousePointメソッド追加 ・frame初期値を-1とする ・motionClassのFs,Feをnew時に不要とする ・EachGotoMotion（指定量だけ移動）とEachMouseGotoMotion（クリック位置まで移動）を追加・・・canvasLibの機能統合 今後の予定 ・グラデーション・色変化機能 ・コンパクト化 ・コード生成ツール
■バージョン5.6(2012-03-16) 追加点・注意事項 ・画像を変えてみました。 ・細かい部分でのメソッドの追加削除 ・親要素内での子要素のMotionが可能→例えば水槽の画像の中で魚を往復させるようなことができます （ただし親要素は四角で回転しないこと←不定形や回転する親要素の衝突判定機能はありません） ・canvasClassのidとtargetを入れ替え 欠点 ・水槽の魚がｗ ・テキストのwidthは書体・環境によって実際の文字幅とずれます
■バージョン5.5(2012-01-24) 追加点 ・バグとり（CanvasのcanvasTag,TextSymbol修正）,各クラスのメソッドの追加修正 ・Motion修正（Bound回転拡大移動の際の計算） ・一括addChild ・色設定を変更 ・初期値でnewして後からパラメーター変更するタイプに修正（SymbolやMotionの数を減らす） ・drawLine（線描画）機能追加 欠点 ・文字によって枠からはみ出る（小文字ｍなど） ・BoundMotionでは計算後drawするので変化率が大きいとはみ出る。計算が複雑になるので円なども四角で扱う。 ・IE6チェックは文字・transform（circleのscale）・ダブルバッファが非対応？ その他 ・ファイル構成は変わらず、5.3と同じ。
■バージョン5.3(2012-01-19) 追加点 ・ツリー構造で登録できるようにしました。（構造表示可能） ・フレーム単位で時間操作ができるようになりました。 欠点 ・倍率操作する際は自分で基準点・幅高さを変更しなければならない。 （描画時に図形をマトリクスで変形するので、図形自体の基準点・幅高さは先に変更できない。 また、円には幅高さがないので先に拡縮マトリクスを図形に反映しておくことができない。） ・同じ図形を複数登録できない。（同じものを参照してしまう） ・ローカルのChromeではcanvasClass.jsの136,171,172をコメント化しないと使えません。（ダブルバッファリングをしない） そうしないと（[http://shokai.org/blog/archives/5668:title]）のクロスドメインの所に書いてあるのと同じエラーが出ます。 未完成部分 ・canvasLibのような時間内に指定マトリクスの処理を行うもの ・複数の図形をまとめて１つの図形として扱うもの （バージョン4.0にはあったけれどなくなりましたw） 断念したこと ・イベントリスナの自作でActionScript3.0に近づけること。
内容 ・main_motion.js:処理を記述。 ・/lib/prototype_extends.js:各クラスを継承しやすくするのに使います。 ・/lib/canvasClass.js:canvasの基本機能が入っています。これだけで基本図形を描けます。 ・/lib/matrixClass.js:マトリクス操作用(拡縮・回転・移動)。 ・/lib/motionClass.js:動きを与える処理を記述。 ・/lib/symbolClass.js:図形（パラメータ・マトリクス・canvasClass基本図形へのリンク保持）。 新しい図形を作りたい場合は ①Symbolクラスを継承 ②canvasClass内の基本図形の組合せをdrawDetailメソッドに記述（オーバーライド）します。 また、Symbolクラスにメソッドを記述すると全ての図形でその処理ができます。 （Motionクラス/GridクラスもSymbolから継承しているので無駄なパラメータがありますｗ） 確認用の設定を除く場合 ・緑の枠やID名を外したい場合はsymbolClass.jsの51行目をコメントアウトしてください。 ・ツリー構造を表示したくない場合はcanvasClass.jsの205,214行目とmain_motion.jsのtrace(2)を外してください。
実行までの流れ(main_motion.jsに記述、パラメータは各自のクラスを参照) ①canvasClass.jsのStageクラスを使い、var c=new Stage(パラメータ)とする。 ②symbolClass.jsの中から描きたい図形を選び、var s=new ○○Symbol(パラメータ)とする。 ③motionClass.jsの中から動かしたい動作を選び、var m=new ○○Motion(パラメータ)とする。 ④静止画はc.setChild(s)とする。 動画はm.setChild(s)のあとにc.setChild(m)とする。 (ここはActionScript3.0でのaddChild()と同じ。ただし描画はしない。) ⑤c.play()でアニメーション 処理としては ①canvasでsetInterval間隔でツリー構造にしたがって描画関数(Motion.draw/Symbol.draw)呼出し ②(動画の場合:MotionでSymbolのマトリクスやパラメータを変更) ③Symbolで保持しているマトリクスとCanvasの基本図形を使って描画(draw:汎用→drawDetail:個別)
■バージョン4.0(2012-01-12) ActionScript3.0の本にあった上下左右で跳ね返るプログラムを元に作ってみました。 目標としては ・1つのcanvasで異なる動きをさせるのにどうするか。 結果は タイマー→(save→描画→restore)→ダブルバッファリングで可能なことがわかりました。 馬鹿みたいな所で躓いているのですが、周りに聞けばヒントがもらえる環境でもなく。 ネットで調べるにもキーワードを知らないというところでいろいろ苦労しています。 今後としての課題は ・これと以下のものを組み合わせる。 ・なるべくFlashでやっていることに近づける。 なのですが・・・ ・イベントリスナーをどうするか。 ・動き・形状・canvas・座標・タイマーをどういうふうに組み合わせるか。 とかいろいろ問題ありそうです。
canvasLib
■バージョン2.4.2(2012-01-06) 追加点 ・ちらつきをなくした（※img.loadが原因？） ・マウス追従機能 ・グリッド表示機能 ・ループ機能 修正点 ・clearRectをCanvasクラスに移動 ・メソッドを用途別に整理 ・細かい部分で修正 ・誤差切り替え廃止 欠点 ・動作記述が面倒 ・Flashのムービークリップのように1つのcanvasでまとめて動作できない 未完成部分 ・他の図形描画（線・楕円・グラデーションなど） ・色の変化 そのほかはバージョン2.4と同じです。
■バージョン2.4.1(2012-01-04) 修正点 ・時間あたりの拡大率の計算式を修正 そのほかはバージョン2.4と同じです。 多少の誤差が気になる場合はsymbolClass.jsの113/114行目のコメントの切り替えをして下さい。
■バージョン2.4(2011-12-29) 設置 ・html(head) <script type="text/javascript" src="./lib/jquery-1.4.4.min.js"></script> <!--[if lte IE 8]><script type="text/javascript" src="./lib/excanvas.js"></script><![endif]--> <script type="text/javascript" src="./lib/prototype_extend.js"></script> <script type="text/javascript" src="./lib/canvasClass.js"></script> <script type="text/javascript" src="./lib/symbolClass.js"></script> <script type="text/javascript" src="./lib/main.js"></script> ・html(body)※ここのidはなんでもいいです <div id="counter"></div> <div id="canvasLib"></div> 追加点 ・円・四角を描画するクラス(ArcSymbolClass/RectSymbolClass)を追加。 ・中心点描画機能(drawPoint)を追加。（使わない場合はsymbolClass.jsの19行目をコメントアウト） ・パラメーター表示機能(initParam/drawParam)を追加。 （main.jsでinitParam(ターゲットid)を指定して使います。使わない場合はmain.jsでinitParamを指定せず、 symbolClass.jsの20行目をコメントアウト） 修正点 ・２回以上クリックしてもおかしくならない。 欠点 ・画像については依然ちらつく。（ダブルバッファリングとか調べたのですが・・・だめでした） ・動かすまでの設定が面倒。(main.jsの記述。これなら直にcanvasを使えばいいのではないかとｗ） ・時間あたりの拡大率の計算がわからないので独自の(あやしい)公式を考えているので誤差がでますｗ （だれか教えてください） そこでsymbolClass.jsの113/114行目のコメントの切り替えで正確/スムーズのどちらかを選べます。 未完成部分 ・マウスクリック追従。 ・曲線で動くとか、加速度とか←無理かも。
■バージョン2.1(2011-12-20) いろいろ不具合はありますが、なんとか動きます。 canvasControl.jsに動作を記述します。 １つのcanvasに１つの画像（レイヤー扱い）を配置し、複数のcanvasを個々に動かすといった形です。 設置 ・html(head) <script type="text/javascript" src="./lib/jquery-1.4.4.min.js"></script> <!--[if lte IE 8]><script type="text/javascript" src="./lib/excanvas.js"></script><![endif]--> <script type="text/javascript" src="./lib/jq_canvasLib.js"></script> <script type="text/javascript" src="./lib/jq_canvasControl.js"></script> ・html(body)※ここのidはなんでもいいです <div id="canvasLib"></div> 欠点 ・ちらつく。 ・クラスと書いてあるが、プロパティがcall/applyで継承できない。 ・基本クリックなどには対応していませんが、サンプルのためクリックすると動くようにしています。 なので・・・２回以上クリックするとおかしな動作をします。 未完成部分 ・拡縮の時間当たりの拡縮計算の公式が分からない。（最悪画像自体を拡大） ・gotoTransform：マウスクリックをした方向に移動する。 ・画像しか使えない。（四角形・丸とかいろいろはまだ）