1.Canvas関数を使った画像の描画

drawImage関数を使うことで画像を表示することが出来ますが,なかなか一筋縄ではいきません。Image() コンストラクタを使用して,最初に読み込みを行い,drawImageで表示するという2ステップが必要です。

2. 画像を表示してみよう

次は「Image」を表示する方法です。まずは,「Files」に画像をアップロードしてください。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6f7b30d6-8c93-4b36-8e06-b80adf024ebb/Untitled.png

(画像は小林先生のチュートリアルのリンゴの画像です。)。

まずは,以下のようにImage() コンストラクタを使用して,最初に読み込みを行います。「options.content」での描き方ですと「src」に入力していましたが,それと同じことを以下のように実行します。「this.files[XXX]」で,画像を読み込みます。

const stim_img = new Image();
stim_img.src = this.files["1.jpg"];

以下のクイックリファレンスも参考にしてください。

drawImage(image, dx, dy)-Canvasリファレンス

drawImageでは,先ほど指定したファイルを指定します。位置は中央寄せはしてくれないので,画像の幅と高さ(400*250)の半分の大きさだけずらします。

const stim_img = new Image();
stim_img.src = this.files["1.jpg"];

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

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

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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/411c0f17-2ac9-4c2e-b8e8-bdc883441924/Untitled.png

以下がここまでのプログラムファイルです。

drawimage_demo-2020-09-13--12 24.study.json