まずは、僕がHTML5のサイトを探していて、一番印象に残っているものをご紹介します。
『HTML5 Canvas and Audio Experiment』
ちょうど、FlashやProcessingが出始めたときにこういったページをよく見かけましたが、HTML5でもこれほどのことが出来ちゃいます！
これは、今回のテーマである「Canvas」を使っているそうです。
では、「Canvas」の可能性を見たところで、「Canvas」について説明したいと思います。
Canvasとは、ブラウザ上に図を描くためのタグで、他に画像を描画したり、文字を描画（Firefoxのみ独自メソッドで可能）したりできます。
Flashで言うところの「ステージ」のようなものです。
では実際に実装してみます。
前回紹介しました「HTML5の構文」をベースに実装していきます。
スタイルシートとJavaScriptを用意し、index.htmlに赤字部分を追加しました。
■ index.html ■
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
<link href="./css/style.css" rel="stylesheet"/>
<script src="./js/script.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
■ style.css ■
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
body {
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
■ style.css ■
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
body {
text-align: center;
padding: 50px 0px;
}
#canvas {
background-color: #000000;
border: 1px solid gray;
}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
■ script.js ■
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
var canvas;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
■ script.js ■
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
var canvas;
onload = function() {
// 2Dコンテキストオブジェクトを取得
canvas = document.getElementById('canvas').getContext('2d'); ・・・①
// 黄色の正方形を描画
canvas.fillStyle = 'rgba(255, 0, 0, 255)'; ・・・②
canvas.fillRect(150, 150, 100, 100); ・・・③
};
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
実行結果
コードはとてもシンプルなので、なんとなく分かると思いますが、
まず最初に、2Dコンテキストオブジェクトを取得しています。
getContextメソッドの引数は、現在、「2d」しかありません。
今後「3d」も使えるようになるのではないでしょうか。
①
①
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
canvas = document.getElementById('canvas').getContext('2d');
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
次に、図形を何色で塗りつぶすかを指定しています。－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
指定する色はCSSで指定するフォーマットに対応しています。
②
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
canvas.fillStyle = 'rgba(255, 0, 0, 255)';
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
最後に、Canvasの左上から x = 150px、y = 150px の位置に、幅 = 100px、高さ = 100px の正方形を描画します。
Canvasは左上が原点となります。
③
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
canvas.fillRect(150, 150, 100, 100);
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
以上が、Canvasの超基本的な使い方です。
他にも、円を描画するメソッドや、グラデーションを指定するメソッド、画像を組み込むメソッドが用意されています。
詳細なリファレンスはこちらを参照してください。
Canvasリファレンス
まとめ
よく「Flash vs HTML5」というテーマの記事をみかけますが、今回紹介した「Canvas」はFlashに対抗する要素の一つです。
ここまでは、描画に関するメソッドを取り上げましたが、Flashと対抗するには、やはり、アニメーションのメソッドが必須になってきます。
しかし、「Canvas」にはそのようなメソッドは用意されていません。
では、どうすればいいのか？
それは、JavaScriptやCSS3を使います。
もう既に、Ajaxなどで、あるエレメントに対してアニメーションするライブラリなんかがたくさん出ているように、その技術を利用します。
HTML5に関して色々調べてて感じたのですが、「HTML5」には２つの意味があるようです。
１つは、純粋にHTML4の次バージョンとしての「HTML5」。
そして、もう１つは「HTML5、CSS3、JavaScript」など、周辺技術を総称しての「HTML5」。
「Flash vs HTML5」は後者の意味で使われています。
僕はHTML5を調べ始めたとき、HTML5って何がそんなにすごいのか、いまいち理解できませんでした。
しかし、「HTML5は構造を、CSS3はデザインを、JavaScriptはそれらを動的にコントロールする。」というような役割分担がされているのが見えたとき、僕はすごく納得できました。
もし、HTML5について漠然としたイメージしか持てない人がいれば、このような感覚を持てば、分からないのこと、調べたいことがはっきりするかもしれません。
0 comment:
コメントを投稿