画像をstatic directory から読み出す

画像ファイルが大量にある場合は「static directory 」に画像を保存しておき，そこから読み出すのが便利です。例えば，複数の画面に同じ画像を表示するとき，各Screenコンポーネントに画像を紐づけてしまうと，それだけ画像枚数が増え，容量が必要になってしまいます。static directory から読み込むようにすれば，その問題を解消できます。

左上のメニューの右端の詳細メニューを選びます。

左から２番目のフォルダのメニューを選びます。分かりにくいのですが，「Filename」の下のあたりに「＋」が表示され，クリックするとファイル選択のダイアログが開きます。

このように画像をアップロードすることが出来ます。

static にある画像を指定するには以下のように頭に"static/"をつけます。「this.files[XXX]」は必要ありません。以下のように指定します。

var imgNO = this.parameters.imgNO;

const stim_img = new Image();
stim_img.src = "static/" + imgNO + ".jpg";

以下のように入力してください。

var imgNO = this.parameters.imgNO;

const stim_img = new Image();
stim_img.src = "static/" + imgNO + ".jpg";

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

  // 以下を描き変えてください。-------------------------------
  
  ctx.drawImage(stim_img,-200, -125);
}