HTML5 canvas要素の基本的な使い方

HTML5で新たに追加されたcanvas要素を使うと、プラグインに頼ることなくアニメーションなどを描画することができます。旧バージョンのブラウザでは対応していないものもあるため、まだまだ使う場面は限られると思いますが、将来的には強力な表現方法の一つになることは間違いないでしょう。

HTML5のcanvas要素

まず、HTMLでcanvas要素を使うには下記のように記述します。width属性で幅、height属性で高さを指定できるほか、id名やクラス名などの属性も指定することができます。canvas要素の中には、canvasをサポートしていない環境での代替表示コンテンツを指定できます。

HTML

<canvas width="640" height="360" id="my-canvas">
HTML5のcanvasがサポートされていないブラウザでの代替表示
</canvas>

canvasへのCSSの適用

canvasには、他のHTML要素と同じようにCSSを適用することができます。下記の例では、id名がmy-canvasのcanvas要素にCSSを適用させています。

CSS

#my-canvas {
  color:#666666;
  background-color:#ffffff;
  font-size:100%;
  border:1px solid #cccccc;
  margin:10px;
  padding:0px;
}

古いIEをcanvasに対応させるexcanvas.js

IEは、バージョン9でcanvasに対応したので、古いIEはcanvasに対応していませんが、Googleのexplorercanvasで公開されているexcanvas.jsを使うことにより、古いIEでもcanvasを使えるようになります。使い方は、下記のようにHTMLの<head>内でIE9未満の場合のみexcanvas.jsを読み込むようにします。

しかし私の確認した限り、現在のexcanvas_r3では描画も遅く対応していない機能も多いため、古いブラウザ用には代替コンテンツを表示させた方が親切な場合もあるでしょう。

HTML

<head>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/excanvas.js"></script>
<![endif]--> 
</head>

ブラウザがcanvasに対応しているかを判定するJavaScript

JavaScriptを使えば、ブラウザがcanvasに対応しているかを判定することができます。下記の例では、canvasに対応していないブラウザではcatchブロックが実行されます。

JavaScript

try {
  document.createElement("canvas").getContext("2d");
  alert("canvas対応");
} catch (e) {
  alert("canvas非対応");
}

canvasへの基本的な描画方法

canvasへの描画の手順としては、まずgetElementById()などを通して取得したcanvas要素からgetContext()でコンテキストを取得します。そして、取得したコンテキストを通して描画を実行します。下記の例では、左上の原点(0, 0)から(170, 30)の位置に縦横300pxの矩形を線で描画しています。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.strokeStyle = 'rgba(0, 0, 0, 0.5)';
  context.lineWidth = 5;
  context.lineJoin = 'round';
  context.strokeRect(170, 30, 300, 300);
};

原点を基準とした描画

後々、オブジェクトを変形させたり、使い回したりすることを考慮すると、オブジェクトは原点を中心に描画した方が有利です。そのためには、save()で変更していないコンテキストの状態を保存し、translate()で座標を移動してから描画します。最後にrestore()でコンテキストを変更前の状態に戻します。

JavaScript

window.onload = function() {
  var canvas = document.getElementById('my-canvas');
  var context = canvas.getContext('2d');
  context.save();
  context.translate(320, 180);
  context.strokeStyle = 'rgba(0, 0, 0, 0.5)';
  context.lineWidth = 5;
  context.lineJoin = 'round';
  context.strokeRect(-150, -150, 300, 300);
  context.restore();
};