10. 画像表示

Webブラウザ上に画像を表示する方法は2つあります。
一つはhtmlのタグを使う方法、もう一つはJavaScriptを使ってCanvasに画像を貼り付ける方法です。
それでは、テキストエディタで打ち込んでみましょう。

リスト10-1: lesson10-1.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson10-1</title>
  </head>
  <body>
    <img src="表示したい画像のURL" />
  </body>
</html>

打ち込んだhtmlファイルをWebブラウザで表示すると、タグのsrc属性で指定した画像が表示されます。画像をただ表示するだけであれば、タグ1つで実現できるんです。

続いて、Canvasに画像を貼り付ける表示するを示します。
JavaScriptを使ってゲームをつくる場合は、こちらを使うことが多いかもしれませんね。

リスト10-2: lesson10-2.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lesson10-2</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500px" height="500px"></canvas>
    <script>
      let image = new Image();
      image.onload = function() {
        let canvas = document.getElementById('myCanvas');
        let context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
      };
      image.src = "表示したい画像のURL";
    </script>
  </body>
</html>

【解説】

Imageクラスのインスタンスをnew Image()という命令で作成します。
クラスやインスタンスという言葉は、オブジェクト指向プログラミングで使われる概念で、種類とその実体をあらわします。
作成したインスタンスのsrcプロパティに対して画像のURLを指定することにより画像が読み込まれます。
ただし、画像ファイルの読み込みには時間がかかりますので、インスタンスのonloadプロパティに読み込み完了時に呼び出す関数を指定します。
そして、画像の読み込みが終わった時点で、描画コンテキストのdrawImage()関数を呼んで、Canvasに画像を貼り付けます。