1. 復習：円を円周上にならべる

このプログラムは，以下のように「緑の円」を円周上に並べるプログラムです。

まずはこのプログラムを実行してください。以下のように表示されます。

var xloc,yloc;
var angle = [0,45,90,135,180,225,270,315];
var radius = 200;

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  for(i=0; i<8; i++){
    xloc = Math.cos(angle[i]*(Math.PI/180))*radius; // x座標
    yloc = Math.sin(angle[i]*(Math.PI/180))*radius; // y座標
    
    // 色と線の幅を指定
    ctx.strokeStyle = "green";
    ctx.lineWidth = 5; // 線の幅は5px
    // 円を描画
    ctx.beginPath(); // パスの初期化
    ctx.arc(
      xloc,//円の中心のx座標
      yloc,//円の中心のy座標
      50,//円の半径
      0, //円の開始角度
      2 * Math.PI//円の終了角度
      )
    ctx.stroke();
  }
}

2. 四角形を並べる

円の代わりに四角形を呈示します。輪郭だけの四角形を呈示する際は，「strokeRect」コマンドを使います。四角形は位置を指定する際に左上の座標を指定する必要があります。

詳細は以下を確認

Scriptsの初歩

そこで，まずは四角形の大きさを変数「stimsize」として保存します。

var stimsize = 100;

四角形の位置は，x座標の位置「xloc」またはy座標の位置「yloc」だけずらした位置を指定します。

    // 四角形を描画
    ctx.strokeRect(
        xloc-stimsize/2,// 左上のx座標
        yloc-stimsize/2,// 左上のy座標
        stimsize,// 幅
        stimsize //高さ
      )

該当部分を書き直すと以下のようになります。

var xloc,yloc;
var angle = [0,45,90,135,180,225,270,315];
var radius = 200;
var stimsize = 100;

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  for(i=0; i<8; i++){
    xloc = Math.cos(angle[i]*(Math.PI/180))*radius; // x座標
    yloc = Math.sin(angle[i]*(Math.PI/180))*radius; // y座標
    
    
    // 色と線の幅を指定
    ctx.strokeStyle = "green";
    ctx.lineWidth = 5; // 線の幅は5px
    
    // 四角形を描画
    ctx.strokeRect(
        xloc-stimsize/2,// 左上のx座標
        yloc-stimsize/2,// 左上のy座標
        stimsize,// 幅
        stimsize //高さ
      )
    
    ctx.stroke();
  

  }
}

実行すると以下のように表示されます。