備忘録的なblog: [html5]canvas上に画像を配置

2014年4月2日水曜日

[html5]canvas上に画像を配置

context#drawImageを使用してcanvas上に画像を配置することができる。

以下のように３種類のdrawImageを用途によって使い分ける。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>canvasに画像を配置</title>
  <style>
    #mycanvas {
      outline: blue 1px solid;
    }
  </style>
</head>
<body>
<!-- canvas上に配置する予定の画像を非表示で用意する -->
<div style="display: none">
  <img src="hoge.png" alt="example" id="myimage" width="592" height="59"/>
</div>
<canvas id="mycanvas" width="800" height="350">
</canvas>
<script>
  !function () {
    var canvas = document.getElementById('mycanvas'),
        ctx;

    if (!canvas.getContext) {
      return;
    }

    ctx = canvas.getContext('2d');
    window.addEventListener('load', function() {
      var image = document.getElementById('myimage');
      // 左上のポジション指定
      ctx.drawImage(image, 10, 10);
      // ポジションと幅、高さ指定
      ctx.drawImage(image,
          10, 90,   // 左上のポジション
          102, 49); // 幅と高さ
      
      // 元画像の描画範囲（切り取り範囲）と幅と高さを指定
      ctx.drawImage(image,
          60, 30,   // 切り取り開始位置（左上の開始位置）
          25, 40,   // 切り取る幅と高さ
          10, 180,  // 画像を配置する左上のポジション
          25, 40);  // 画像の幅と高さ
    });
  }();
</script>
</body>
</html>