HTML5の便利なTips100選第2回

HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -

Canvas APIは、HTML＋JavaScriptだけで図形を描画するための機能です。従来、ブラウザ上で動的に図形を描画するには、Flashのようなプラグインを利用しなければなりませんでした。しかし、Canvas APIを利用することで、ブラウザ標準の機能だけで同じようなことが実現できます。今

山田祥寛（YAMADA, Yoshihiro）

2012年6月26日 20:00

Canvas APIは、HTML＋JavaScriptだけで図形を描画するための機能です。従来、ブラウザ上で動的に図形を描画するには、Flashのようなプラグインを利用しなければなりませんでした。しかし、Canvas APIを利用することで、ブラウザ標準の機能だけで同じようなことが実現できます。

今回は、そのCanvas APIを使って、Webページ上に図形を描画するサンプルを解説していきます。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

[第2回目次]

TIPS 007：キャンバスを準備する
TIPS 008：キャンバスに四角形を描画する
TIPS 009：キャンバスに直線を描画する
TIPS 010：折れ線を描画する
TIPS 011：多角形を描画する
TIPS 012：ベジェ曲線を描画する
TIPS 013：円／円弧を描画する
TIPS 014：直線から連なる円弧を描画する
TIPS 015：線のスタイルを設定する
TIPS 016：角の形状を設定する
TIPS 017：図形を塗りつぶす

もちろん、Canvas APIは新しい機能なので、まだまだ老舗のFlashには機能面でも生産性でも及ばない点はあまたあります。本格的な開発では、ライブラリなどが充実してくるのを待つべき分野もあるでしょう。また、そもそも対応ブラウザも限定されていますので、無制限にすべてのサイトで利用できるわけではありません。

それでも、Canvas APIはHTML5の中でももっとも注目されている機能のひとつです。今後、ゲームやアニメーションの分野で利用される機会は確実に広がっていくものと予想されます。

表1：Canvas APIの対応バージョン

ブラウザ	対応バージョン
Internet Explorer	9以降
Firefox	1.5以降
Google Chrome	1.0以降
Safari	1.3以降
Opera	9以降

TIPS 007：キャンバスを準備する

Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。

［リスト1］キャンバスを準備するコード（canvas.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 TIPS</title>
<!--キャンバスの背景色／枠線を指定（3）-->
<style>
#cv {
  background-color: #FFF;
  border: 1px solid black;
}
</style>
<script>
...中略...
</script>
</head>
<body>
<!--キャンバスの準備（1）-->
<canvas id="cv" width="400" height="300">
  <!--Canvas機能に対応していないブラウザへの備え（2）-->
  Canvas機能に対応したブラウザでアクセスしてください。
</canvas>
</body>
</html>

キャンバスは、