画像をアップロードし,それを表示するという方法について説明します。Image() コンストラクタを使用して,最初に読み込みを行い,drawImageで表示するという2ステップが必要です。

1. 復習:Scriptsの準備

2. 復習:図形を描画するには

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

4. 画像名を変数で指定しよう

5. Loopで指定したパラメータを取得しよう

6. 画像をstatic directory から読み出す

1. 復習:Scriptsの準備

「Builder」で文字を表示するには「Content」のタブに入力をしていきますが,「Canvas」のコードをそのまま入力するためには「Scripts」のタブに変えて入力していきます。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/88115cf7-49fe-4130-976d-1b5538f990a8/Untitled.png

「title」は「draw」に,その横の「event」は**「before:prepare」**に変更してください。

↑ before:prepare に変える点がとても重要です。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8b83ac5a-5cd5-46e9-a404-13c1f69c540c/Untitled.png

2. 復習:図形を描画するには

「Script」に以下の関数を描き,その中に描画に関するCanvasの関数を追加することで「Content」に刺激を描画することが出来ます。インターネット上の「Canvas」に関するチュートリアルではCanvasをHTMLの中に埋め込む部分から説明がされていると思いますが,「lab.js」は,自動的にCanvasを作ってくれていますので,新たに作る必要はありません。

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

「renderFunction」の中で重要になるのは「ctx」と「t」の部分です。「ctx」が描画に関連します。また,「t」の部分で時刻の情報を取ってくることができます

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

「Image」を表示する方法です。まずは,以下のリンゴの画像をダウンロードし,「Files」に画像をアップロードしてください。