javascript 配列について

質問

HTML5のcanvasにjsで描画する場合、
下記のように複数の図形を描く場合、
配列を用いて表記するにはどのようにすればよろしいでしょうか。
なお、図形の数は決まっていない、また、x,y,width,heightに規則性はないものとします。

ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(20,10,10,10);

ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(30,10,10,10);

ctx.fillStyle = "rgba(64,64,64,1)";
ctx.fillRect(10,20,10,10);

ctx.fillStyle = "rgba(64,64,64,1)";
ctx.fillRect(40,20,10,10);

…

以上、ご教授いただきたく何卒よろしくお願い致します。

回答No.2

LOHA · ベストアンサー

なんてことない小手先ですが

◎方法１：単に短くする

var rects = [{ s: "rgba(0,0,0,1)", r: [20, 10, 10, 10] },
　{ s: "rgba(0,0,0,1)", r: [20, 10, 10, 10] }, (略) ];

for (var i = 0; i < rects.length; ++i) {
　ctx.fillStyle = rects[i].s;
　ctx.fillRect.apply(ctx, rects[i].r);
}

◎方法２：配列にする

var rects = [
　["rgba(0,0,0,1)", [20, 10, 10, 10]],
　["rgba(0,0,0,1)", [20, 10, 10, 10]]
];

for (var i = 0; i < rects.length; ++i) {
　ctx.fillStyle = rects[i][0];
　ctx.fillRect.apply(ctx, rects[i][1]);
}

◎方法３：さらに削る

var rects = [
　["0,0,0,1", [20, 10, 10, 10]],
　["0,0,0,1", [20, 10, 10, 10]]
];

for (var i = 0; i < rects.length; ++i) {
　ctx.fillStyle = "rgba(" + rects[i][0] + ")";
　ctx.fillRect.apply(ctx, rects[i][1]);
}

＃良いかどうかは問わず

お礼

LOHA様
早速ご回答ありがとうございます。
まだ試していませんが、まさに知りたい内容でした。
もともとイメージしていたのが方法2でしたが、
どれも試させていただきます。

回答No.1

LOHA

普通にfor文で回せば良いと思います。

var rects = [{ fillStyle: "rgba(0,0,0,1)", rect: [20, 10, 10, 10] },
　{ fillStyle: "rgba(0,0,0,1)", rect: [20, 10, 10, 10] }, (略) ];

for (var i = 0; i < rects.length; ++i) {
　ctx.fillStyle = rects[i].fillStyle;
　ctx.fillRect.apply(ctx, rects[i].rect);
}

のような感じでしょうか。

補足

LOHA様
早速ご回答いただきましてありがとうございます。

追加で、もし可能であれば教えていただきたいのですが、
図形の数がかなり多いので、rectsの配列で、
fillStyleとrectを省略できるような方法はありますでしょうか。

何卒よろしくお願い致します。