Canvasによるイメージの描画サンプル

icon 項目のみ表示/展開表示の切り替え

Canvasによるイメージの描画

HTML5のCanvasを使用して図を表示する場合は、まず図を描く領域を指定します。
このサンプルでは、htmlソース中に以下のように記述しています。
<canvas id="t1" width="320" height="240"></canvas>
CanvasはSVGの様にインラインで記述できず、javascriptで図形を指定して描画する必要があります。htmlを読み込んだ時に自動にjavascriptが実行されるようにwindow.onload = function(){にソースを記述しています。
次にgetElementByIdを使用してCanvasオブジェクトを取得しgetContextメソッドがセットされているかチェックします。
セットされていた場合、Canvas要素よりコンテキストを作成するために、 
var ctx = canvas.getContext('2d');
を呼び出します。ctxにコンテキストが返されます。
new ImageによりImageオブジェクトを作成し、srcプロパティにファイル名を設定して画像ファイルをロードします。
ロードの完了後に描画する必要があるため、onloadイベントを設定しロード完了後にdrawImageを呼び出すようにします。

以下に320*240の領域に座標 画像ファイルimage1.jpgをロードして表示する場合のソースコードを示します。 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <canvas id="t1" width="320" height="240">
  </canvas>
  <script type="text/javascript">
    window.onload = function(){
      var canvas = document.getElementById('t1');
      if (canvas.getContext){
        var ctx = canvas.getContext('2d');
        var img=new Image();
        img.src="image1.jpg";
        img.onload=function(){
          ctx.drawImage(img,0,0);
        }
      }
    }
  </script>
</body>
</html>
ソースファイルのダウンロード(img.zip)