ここまでの説明は「drawImage」を見てください。
さて,今回のプログラムでもう一つ重要なのが,「this.queueAnimationFrame()」です。これでフレームごとに画面を描き変えます。
this.options.renderFunction = (t, canvas, ctx, obj) => {
// 200ms ごとに画像を切り替え
num = Math.floor(t/200);
// このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
// t: timestamp この関数が呼び出された時刻
// canvas: canvasオブジェクトへのレファレンス
// ctx: 描画するコンテンツの情報(一番重要)
// obj: 現在描画されているcanvasへの参照
// 以下を描き変えてください。-------------------------------
ctx.drawImage(stim_img[num%4+1],-200, -125);
// 画面を書き換える
this.queueAnimationFrame();
}
以下のように入力してください。
drawimage_demo4-2020-09-13--18 20.study.json
今回,時刻を取得して画面を切り替える方法を用いてますが,実際にはブラウザの更新タイミングで書き換えが行われます。ブラウザは標準的に60fpsで画面が更新されるようですので,実際にはそのタイミング(16.6ミリ秒の倍数)で刺激の呈示時間が変わっていることになるでしょう。