このページでは，配列とfor文を使って，複数の円を規則的に配置する方法を学びます。

はじめに円を1つ描画し，次に複数の円を横一列に配置します。最後に，円を3行×3列に配置してみましょう。

1. 円を１つ描く

1.1. 実験プログラムを準備する

はじめに，以下の実験プログラムをダウンロードしてください。このプログラムを修正しながら，実験を作成していきます。

circle-scripts.json

ZIP形式：

circle-scripts.json.zip

ZIP形式のファイルをダウンロードした場合は，ファイルを展開してからlab.js Builderで読み込んでください。

1.2. 画面の中央に円を描く

最初のプログラムでは，画面の中央に緑色の枠線で囲まれた円を1つ描画します。

this.options.content.push({
    type: 'circle',
    left: 0, top: 0, angle: 0,
    width: 100,
    fill: null,
    stroke: 'green', strokeWidth: 5
});

このコードで指定している主なプロパティは，次のとおりです。