javascript配列でHTML5のcanvasに図形を描画する方法

質問

• javascriptの配列を使用してHTML5のcanvasに複数の図形を描画する方法について教えてください。
• 図形の数や座標に規則性はなく、xやy、width、heightが変動するケースも考慮してください。
• 質問の例では、ctx.fillRect()メソッドを使用して図形を描画しています。

回答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でしたが、
どれも試させていただきます。