HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のCanvasで画像を描画する方法【drawImage()の使い方を解説】

HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックスやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、ブラウザ上で動的なビジュアル表現を実現できます。

HTML5キャンバスで画像を扱うには、drawImage()メソッドを使用します。このメソッドは、指定した画像をキャンバス上にそのまま描画します。

drawImage()メソッドの基本構文と引数

drawImage()メソッドの基本的な呼び出し形式は次の通りです。

ctx.drawImage(img, x, y);

各引数の意味は以下の通りです。

  • img： 描画対象となる画像オブジェクト、または別のキャンバスオブジェクトへの参照
  • x： 画像を配置するターゲットキャンバス上のX座標
  • y： 画像を配置するターゲットキャンバス上のY座標

サンプルコード

以下のコードを実行すると、キャンバスに背景画像を読み込み、その上に折れ線を描画する一連の流れを確認できます。img.onloadイベントの中で描画処理を行っている点が重要です。画像の読み込みが完了してから描画しないと、真っ白なキャンバスになってしまうことがあります。

<!DOCTYPE HTML>
<html>
   <head>
      <script type="text/javascript">
         function drawShape() {
            // DOMからcanvas要素を取得
            var canvas = document.getElementById('mycanvas');

            // canvasがサポートされていない環境では実行しない
            if (canvas.getContext) {

               // 描画用の2Dコンテキストを取得
               var ctx = canvas.getContext('2d');

               // 画像を読み込んで図形を描画
               var img = new Image();
               img.src = '/images/backdrop.jpg';
               img.onload = function() {
                  // 読み込み完了後に画像を描画
                  ctx.drawImage(img, 0, 0);
                  ctx.beginPath();
                  ctx.moveTo(30, 96);
                  ctx.lineTo(70, 66);
                  ctx.lineTo(103, 76);
                  ctx.lineTo(170, 15);
                  ctx.stroke();
               }
            } else {
               alert('このデモを表示するにはSafariまたはFirefox 1.5+が必要です。');
            }
         }
      </script>
   </head>

   <body onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>

実装時のポイント

  • onloadイベントで描画する： new Image()で生成した画像は非同期で読み込まれるため、必ずimg.onloadのコールバック内でdrawImage()を呼び出しましょう。
  • コンテキスト取得前に対応チェック： canvas.getContextが存在するかどうかを判定することで、canvas未対応の古いブラウザでもエラーを回避できます。
  • サイズ指定も可能： drawImage(img, x, y, width, height)のように幅と高さを指定すると、画像を拡大・縮小して描画できます。

現在の主要ブラウザ（Chrome、Edge、Firefox、Safariなど）はすべてcanvasに対応しているため、特別なプラグインなしに動的なグラフィック描画を行えます。

  1. GoogleマップでHTML5 Geolocation APIを使って現在地を表示する方法

    HTML5 Geolocation APIとは？ HTML5 Geolocation APIは、ユーザーの同意のもとで位置情報をWebサイトと共有できる標準的なブラウザ機能です。JavaScriptでデバイスの緯度・経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、近くのお店や施設の検索、地図上への現在地表示など、位置情報を活かした多彩な機能を実装できます。Geolocation APIが返す座標は、デバイスの地理的な位置を正確に示します。 ここでは、getCurrentPosition()メソッドを使って現在の位置情報を取得し、Googleマップ（Google Stat

  2. 【HTML5】ドラッグ＆ドロップ（DnD）の実装方法をサンプルコード付きで解説

    ドラッグアンドドロップ（Drag and Drop / DnD）は、マウス操作だけで要素のコピー・並べ替え・削除などを直感的に行える、強力なユーザーインターフェースの概念です。ユーザーは要素の上でマウスボタンを押しながらドラッグし、目的の場所でボタンを離すことで、その要素を移動させることができます。従来のHTML4でこの機能を実現するには、複雑なJavaScriptのコーディングや、jQueryのような外部ライブラリ・フレームワークに依存する必要があり、実装のハードルが高いのが課題でした。ところがHTML5では、Drag and Drop（DnD）APIが標準で搭載され、ブラウザ自身がネイティ