|
|---|
Flashになじみのある人がHTML5でまず興味を持つのが、アニメーションやモーションなどの表現力ではないでしょうか？ 私がFlashに興味を持ち、虜になったきっかけも、モーションの気持ちよさやデザイン性、インタラクティブな表現力でした。
今回は基本的なモノ(object)を動かすための準備として、矩形や円を描画してみましょう。HTML5では、canvas要素とJavaScriptのCanvas APIによって、ビットマップ画像を描画できます。
Canvasで画像を描画するには、HTMLでキャンバス領域を定義します。
■サンプル1[01.html]
<body>
<canvas id ="cvs1" width="150" height="150"></canvas>
<script type="text/javascript" src="js/01.js"></script>
</body>
このHTMLでは、body要素内にcanvas要素を記述し、150×150ピクセルのキャンバスを定義しています。
script要素で読み込んでいるJavaScriptは以下になります。単純な矩形を描くプログラムです。
■サンプル1[01.js]
window.onload = drawRect;
function drawRect(){
var canvas = document.getElementById("cvs1");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.fillRect(50, 50, 100, 100);
}
drawRect()では、ID属性が「cvs1」の要素を取得してコンテキストを設定しています。設定したコンテキストをctxオブジェクトに格納し、7行目のctx.fillRect(50, 50, 100, 100);で矩形を描いています。fillRect()の引数は以下になります。
ctx.fillRect(x座標, y座標, width, height);以上がもっとも基本的なCanvasの使い方です。
次に、円を描いてみましょう。
■サンプル2[02.js]
window.onload = drawCircle;
function drawCircle(){
var canvas = document.getElementById("cvs1");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(100, 100, 50, 0,Math.PI * 2, true);
ctx.fill();
}
サンプル1と違うのは、7、8行目だけですね。ctx.arc(100, 100, 50, 0,Math.PI * 2, true);が円を描くメソッドです。引数は以下になります。
ctx.arc(円の中心のx座標, 円の中心のy座標, 円の半径, 円弧を描き始める角度,円弧を描き終える角度, 反時計回りかの真偽値);ここでいったんブラウザーで開いて確認してみましょう。問題なく表示されましたか？
サンプル1の実行画面。矩形が表示される
サンプル1の実行画面。矩形が表示される
古いInternet Explorer（IE）で開いた方は何も表示されなかったかもしれません。Canvasは、Safari 1.3以降、Opera 9以降、Firefox 1.5以降など、主要なブラウザーではだいぶ前から実装されていますが、IEは9でようやく実装されました。
でも安心してください。グーグルが公開している「ExplorerCanvas」というライブラリーを読み込むことで、古いIEでもCanvasを使ったプログラムが他のブラウザーと同じように実行できます。ExplorerCanvasはIE6以上で動作しますので、ほとんどのユーザーでカバーできますね。
使い方はとても簡単です。HTMLに以下の1行追加するだけです。
■サンプル2[02_2.html]
<!--[if IE]><script type="text/javascript" src="js/libs/excanvas.js"></script><![endif]-->
<!--[if IE]>...<![endif]--> で囲んでいるのは、IE以外のブラウザーでは無視される「条件付きコメント（コンディショナルコメント）」です。ExplorerCanvasはIE以外のブラウザーには必要ありませんので、無駄な読み込みを避けるためにこのように記述しています。ちなみに、条件付きコメントを使わなくても、他のブラウザーでエラーになることはありません。
◆
今回はCanvasを使って矩形や円を描いてみました。単純に図形を描くだけならこれでいいのですが、今後動きのあるモノを作っていくにはこのままだとちょっと面倒です。次回は、Canvasを使ったプログラムを使い回せるように改良します。
著者：塚本一真（つかもと・かずまさ）
デザイナー／フロントエンドエンジニア。1ripple代表 。1979年生まれ、兵庫県神戸市出身。Webデザイン会社にて勤務後、 2010年6月に独立。さまざまなプロモーションサイトやWebサイトを制作。好きな食べ物は酒がすすみそうな、つまみ系。嫌いな食べ物はなし。最近は肉より魚になってきたこの頃です。Web制作やアプリ開発などジャンル問わず 、フリーランスや学生さん、気軽にご連絡ください！
主な受賞歴：WEBBY AWARDS、W3 AWARDS、FWA SITE OF THE DAY、THE INTERNATIONAL DAVEY AWARDS、SPIKES ASIA
