スクラッチでjavascriptでのシミュレーションを作る

フルスクラッチでシミュレーションを作ります。
シミュレーションと言ってもいろいろありますが、ショッピングサイトで商品をシミュレーションする時のアレです。

今回は全てcanvas上で行います。
フラッシュではライムラインの制御が簡単に実装できますが
全てjavascriptでツール等も何も使いませんので、若干骨がおれます。

少し制御を楽にするために、canvasを複数にわけます。
canvas上でアニメーションしようとすると、全消しと描画の繰り返しになりますので
canvasをわけることによって、全消し時に消えない部分を作ることができるので
制御が楽になります。

canvas上では、正方形を描画しても描画した瞬間にそれは一枚の絵になってしまいます。
ですので、描画時に

var imgObject = {
        x:100,
        y:100,
        width:200,
        height:200
};
ctx.drawImage(img,imgObject.x,imgObject.y,imgObject.width,imgObject.height);

こんな感じでオブジェクトを作ったうえで描画することで、疑似的にオブジェクト化します。
こうするとマウスクリックイベントを処理する時に、このオブジェクトを使えばよいことになります。

こんな感じで地道にcanvas上にオブジェクトを配置し、シミュレーションらしくしていきます。
ツールを使った開発もいずれやります。

折り紙の件は変にいろいろ考えてしまって謎の頓挫（汗