0. 赤い四角形を描画する

はじめに，一辺の長さが100の赤い正方形を描画してください。

this.options.content.push({
    type: 'rect',
    left: 0,
    top: 0,
    angle: 0,
    width: 100,
    height: 100,
    fill: 'red' 
})

以下のように表示されます。

image.png

1秒後に画面が終了するように設定する

画面上部の「Behavior」タブを選択し，「Timeout」を「1000 ms」に変更してください。

1. 変数でプロパティを指定する

四角形のプロパティを変数で指定できるようにします。変数については，以下の説明を参照してください。

変数と定数「var」「let」「const」

ここでは，四角形のサイズを変数rectSizeで指定します。

let rectSize = 100;

this.options.content.push({
    type: 'rect',
    left: 0,
    top: 0,
    angle: 0,
    width: rectSize,
    height: rectSize,
    fill: 'red' 
})

widthとheightの両方にrectSizeを指定しているため，一辺の長さが100の正方形が表示されます。

image.png