HTML5 canvasに画像を表示する

HTML5のcanvas APIには、drawImage()が用意されており、簡単にcanvasに画像を表示することができます。drawImage()には、HTMLImageElementだけでなく、HTMLCanvasElementやHTMLVideoElementを渡すこともできるため、うまく利用することで面白い表現ができそうです。また、CanvasPatternを作成することにより、CSSの背景画像のように画像を繰り返しパターンとして表示することもできます。

画像を表示する drawImage()

drawImage()は、第1引数で指定した画像をcanvasに表示します。第2, 3引数で(x, y)座標、第4引数で画像の幅、第5引数で画像の高さを指定します。第4, 5引数は省略することができ、省略した場合はソースとなる画像の幅と高さになります。

canvasに画像を表示する際の注意点は、画像の読み込み完了を待ってから処理をすることです。下記の例では、onloadで画像の読み込みが完了してから処理するようにしています。また、IEでは既にキャッシュされている画像はonloadが発生しないので、その対策として画像のURLにクエリーを付加しています。

JavaScript

window.onload = function() {
  function drawCanvas() {
    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');
    context.save();
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    var width = image.width;
    var height = image.height;
    var x = -(width * 0.5);
    var y = -(height * 0.5);
    context.drawImage(image, x, y, width, height);
    context.restore();
  }
  var image = new Image();
  image.src = 'img/image.png' + '?' + new Date().getTime();
  image.onload = function() {
    drawCanvas();
  };
};

drawImage()で画像をトリミングして表示する

drawImage()は、引数を追加することで画像をトリミングして表示することができます。その際、第2, 3, 4, 5引数は、ソース画像内のトリミングする範囲を示す(x, y, width, height)となります。続いて、第6, 7, 8, 9引数は、canvasへの描画領域を示す(x, y, width, height)となります。

下記の例では、ソース画像内の座標(50, 50)から幅100, 高さ100でトリミングした画像を、canvasの中心から(-100, -100)の座標に幅と高さを200に拡大して表示しています。

JavaScript

window.onload = function() {
  function drawCanvas() {
    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');
    context.save();
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    var sourceX = 50;
    var sourceY = 50;
    var sourceW = 100;
    var sourceH = 100;
    var x = -100;
    var y = -100;
    var width = 200;
    var height = 200;
    context.drawImage(image, sourceX, sourceY, sourceW, sourceH, x, y, width, height);
    context.restore();
  }
  var image = new Image();
  image.src = 'img/image.png' + '?' + new Date().getTime();
  image.onload = function() {
    drawCanvas();
  };
};

clip()で画像をクリッピングする

drawImage()では画像を矩形でしかトリミングできませんが、clip()では自由な形状のパスで画像をクリッピングできます。clip()は、画像だけでなく線や塗りもクリッピングすることができます。下記の例では、中心から半径100の円でクリッピング領域を作成し、その領域内に画像を表示しています。

JavaScript

window.onload = function() {
  function drawCanvas() {
    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');
    context.save();
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    // クリッピング領域を作成
    context.beginPath();
    context.arc(0, 0, 100, 0, 360 * Math.PI / 180, false);
    context.clip();
    // 画像を表示
    var width = image.width;
    var height = image.height;
    var x = -(width * 0.5);
    var y = -(height * 0.5);
    context.drawImage(image, x, y, width, height);
    context.restore();
  }
  var image = new Image();
  image.src = 'img/image.png' + '?' + new Date().getTime();
  image.onload = function() {
    drawCanvas();
  };
};

画像の繰り返しパターンを作成する createPattern()

createPattern()は、第1引数の画像の繰り返しパターンを作成し、CanvasPatternオブジェクトとして返します。第2引数では、繰り返し方法をCSSのbackground-repeatと同様に"repeat", "repeat-x", "repeat-y", "no-repeat"の中から指定します。作成したCanvasPatternは、線や塗りのスタイルとして指定することができます。下記の例では、作成したパターンを塗りのスタイルに指定し、矩形を描画しています。

なお、私が確認した限り、IE9とFirefox11.0(Windows, Mac)が"repeat-x", "repeat-y"に対応していない他、WindowsのChrome17.0で"repeat"以外の解釈がおかしい等、部分的に未対応のブラウザがあるので注意が必要です。

JavaScript

window.onload = function() {
  function drawCanvas() {
    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');
    context.save();
    context.translate(canvas.width * 0.5, canvas.height * 0.5);
    // CanvasPatternを作成
    var canvasPattern = context.createPattern(image, 'repeat');
    // 塗りのスタイルにCanvasPatternを指定
    context.fillStyle = canvasPattern;
    context.fillRect(-180, -135, 360, 270);
    context.restore();
  }
  var image = new Image();
  image.src = 'img/image.png' + '?' + new Date().getTime();
  image.onload = function() {
    drawCanvas();
  };
};