1. Scripts

それでは，まずは変数を使用して緑の円を描く位置を変えられるようにしましょう。以下のように，まずは変数「xloc」を作成し，値を「300」にします。

次に，プロパティ「left」の値に「xloc」を指定します。

var xloc = 300;

// Circle
  this.options.content.push({
    //共通パラメータ
    type: 'circle', 
    left: xloc,top: 0, 
    width:100, height:100,
    fill:null,stroke:'green', // nullまたは'red' 'rgb(X,X,X)'
    strokeWidth:'5',
    angle: 0
  })

実行をすると，円が少し右にズレて表示されます。

次は，配列を使ってみましょう。以下のように配列を作成し，代入してください。配列は「0」から開始されるので，以下の例では「-300」が代入されます。

var xloc = [-300, 0, 300];

// Circle
  this.options.content.push({
    //共通パラメータ
    type: 'circle', 
    left: xloc[0],top: 0, 
    width:100, height:100,
    fill:null,stroke:'green', // nullまたは'red' 'rgb(X,X,X)'
    strokeWidth:'5',
    angle: 0
  })

実行をすると，今度は円が右にずれます。