画像を表示する方法 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

canvas 要素は HTML ドキュメント上に描画できる領域で、JavaScript を使って、アニメーション、グラフ、ゲームなどのグラフィックスを生成できます。このトピックでは、canvas 要素を使って画像を表示するために必要な手順について説明します。

必要条件

このトピックの前提条件は次のとおりです。

  • JavaScript テンプレート用 Windows ライブラリを使う、JavaScript で開発された基本的な Windows ストア アプリを作成できる。
  • HTML と JavaScript の基本を把握している必要があります。

JavaScript を使った Windows ストア アプリを初めて作成する場合は、「JavaScript を使った初めての Windows ストア アプリの作成」をご覧ください。WinJS テンプレートの使い方について詳しくは、「WinJS ツールキットの取得および使用方法」をご覧ください。

手順

ステップ 1: レンダリング コンテキストの取得

キャンバスに画像を描画するには、canvas 要素からレンダリング コンテキストを取得する必要があります。レンダリング コンテキストは、すべての描画メソッドとプロパティが定義される場所です。それぞれの <canvas> 要素にレンダリング コンテキストが関連付けられているため (多くの場合、ctx という変数名が付けられます)、ページが完全に読み込まれるまで (つまり、canvas 要素が完全に DOM に格納されるまで) このコンテキストにアクセスすることはできません。DOM 内の canvas 要素を確実に利用できるようにする方法の 1 つは、次に示すように、ページの末尾にスクリプト ブロックを配置することです。

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Canvas element image drawing</title>
  <style>
    .
    .
    .
  </style>
</head>

<body>
  .
  .
  .
  <script>
    .   
    .
    .
  </script>
</body>

</html>

次のようにしてレンダリング コンテキストを取得することができます。

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Canvas element image drawing</title>
  <style>
    canvas {
      border: 1px black solid; /* Draw a border around the canvas element. */
    }
  </style>
</head>

<body>
  <canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
  <script>
    var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');   
  </script>
</body>

</html>

コードを見るとわかりますが、この canvas 要素では 491px × 538px のサイズの画像を想定しています。コンテキスト (ctx) を取得するには、DOM 内のすべての canvas 要素の一覧を取得し、最初の要素のみを選び、getContext('2d') を呼び出すことでその要素のコンテキストを取得します。

ステップ 2: 表示する画像の読み込み

画像がクライアントにダウンロードされるまで時間がかかる場合があるため、画像が完全に読み込まれた後でアクセスする必要があります。そのためには、次に示すように、画像オブジェクトの onload イベント ハンドラーを使います。


var imageToDraw = new Image();

imageToDraw.onload = function() {
  // It is now safe to access the image.
}

imageToDraw.src = 'images/duckCat.jpg';

この例では、関連付けられた画像 (duckCat.jpg) が完全に読み込まれた後でのみ匿名関数が呼び出されます。

ステップ 3: 画像の表示

次に示すように、onload イベント ハンドラーを使って、キャンバス上に画像を表示することができます。


<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Canvas element image drawing</title>
  <style>
    body {
      width: 402px; /* Accommodate the 1px canvas borders. */
      margin: 0 auto; /* Center the page's content. */
    }
    
    h1 {
      text-align: center;
    }
       
    canvas {
      border: 1px black solid; /* Draw a border around the canvas element. */
    }
  </style>
</head>

<body>
  <h1>How to display an image using the canvas element</h1>
  <canvas width="491" height="538">Canvas is not supported - upgrade your browser.</canvas>
  <script>
    var ctx = (document.getElementsByTagName('canvas')[0]).getContext('2d');    
    var imageToDraw = new Image();

    imageToDraw.onload = function() {
      ctx.drawImage(imageToDraw, 0, 0);
    }
    
    imageToDraw.src = 'images/duckCat.jpg';    
  </script>
</body>

</html>

注釈

drawImage メソッドはこの例で示したよりも多くのパラメーターに対応しており、非常に強力です。詳しくは、Mozilla Developer Network の Web サイトで画像の使用に関するページをご覧ください。

関連トピック

クイック スタート: キャンバスへの描画

パフォーマンスの最適化: JavaScript コード