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

HTML5のdrawImage()メソッドでキャンバスに画像を描画する方法

HTML5のCanvas（キャンバス）に画像を描画するには、drawImage()メソッドを使用します。このメソッドを使うことで、外部の画像ファイルをキャンバス上の任意の位置に配置し、さらにその上に図形などを重ねて描画することも可能です。

drawImage()メソッドの基本的な使い方

以下は、キャンバスに背景画像を読み込み、その画像の上に線分を描画するサンプルコードです。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         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>

コードの解説

  • canvas要素の取得： document.getElementById()を使って、DOMから対象のキャンバス要素を取得します。
  • 対応ブラウザのチェック： canvas.getContextの存在を確認することで、Canvas未対応のブラウザでは警告を表示して処理を回避しています。
  • 2Dコンテキストの取得： getContext('2d')により、図形や画像を描画するための2D描画コンテキストを取得します。
  • 画像オブジェクトの生成： new Image()で新しい画像インスタンスを作成し、srcプロパティに画像ファイルのパスを指定します。
  • onloadイベントでの描画： 画像の読み込み完了後にctx.drawImage(img, 0, 0)を呼び出し、座標(0, 0)を起点として画像を描画します。その後、beginPath()やlineTo()などを使って画像の上に線分を追加しています。

実装時の注意点

画像は読み込みが完了していない状態では描画できません。そのため、img.onloadイベントのコールバック内でdrawImage()を呼び出すのが基本です。もしonloadを使わずに直接描画しようとすると、画像データがまだ取得されておらず、キャンバスに何も表示されない原因になります。

また、drawImage()メソッドは引数を増やすことで、画像の一部だけを切り取って描画したり、表示サイズを拡大・縮小したりすることもできます。用途に応じて柔軟に活用してみてください。

  1. HTML5 Canvasで長方形を描画する方法をわかりやすく解説

    HTML5の<canvas>タグは、JavaScriptなどのスクリプトを使ってグラフィックやアニメーションを描画するための要素です。HTML5で新たに導入されたタグであり、動的なビジュアル表現を実現するための強力な機能を提供します。canvas要素には「getContext」というDOMメソッドが用意されています。このメソッドはレンダリングコンテキストと、それに付随する描画機能一式を取得するもので、引数としてコンテキストの種類（ここでは2D描画を表す「2d」）を1つ指定します。fillRect()メソッドで長方形を描くHTML5 Canvasで長方形を描画するには、fillRec

  2. HTML5 Canvasを使って星を描く方法を解説

    HTMLのcanvas要素に描画を行うには、JavaScriptを使用します。実際に描き始める前に、HTML DOMメソッドであるgetElementById()とgetContext()を使って、キャンバスへの参照と描画コンテキストを取得しておく必要があります。HTMLで星を描くには、canvas要素を利用します。星形を描く際にはlineTo()メソッドが便利です。このメソッドはx座標とy座標の2つのパラメータを受け取り、その位置へ線を引くことで図形を形成していきます。まず、HTMLドキュメント内にキャンバスを配置する方法から見ていきましょう。サンプルコード以下のコードを実行すると、HTML