- 2010年9月12日 18:01
- HTML / XHTML
こんにちは、HTML5委員会です。
各校舎のインストラクターからメンバーを募り、最近発足された委員会です。
今後も、たまに顔を出すと思いますので、よろしくお願い致します。 
委員会の名前の通り、HTML5についていろいろ紹介していきます。
今回は、Webページ上で、グラフなどの図を描画するために作られた
canvas要素を紹介します。
canvas要素の紹介の前に、 HTML5から記述方法が変わった要素があります。
こちらから紹介します。
まずは、要素の前に文書型宣言が変わっていて、
下記の通りXHTMLと比べてかなり短くなります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
↓↓↓↓↓
<!DOCTYPE html>
次に、文字エンコーディングの設定も変わっています。
meta要素にcharset属性が新しく出来たので、次の通りだいぶ短くなります。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
↓↓↓↓↓
<meta charset="UTF-8" />
最後に、style要素とscript要素にtype属性がいらなくなり、次の通り記述できます。
<style type="text/css"></style>
↓↓↓↓↓
<style></style>
<script type="text/javascript"></script>
↓↓↓↓↓
<script></script>
それでは、本題のcanvas要素を使って、
次の完成例ように星を描画する方法を紹介します。 
完成例(実物大)
次のサンプルコードが、HTML5を使って作成した、星を描画するサンプルコードです。 
サンプルコード
(クリックで拡大)
サンプルコードを作成して、
完成例と同じようにできているか確認する際に注意があります。
うまく表示できるブラウザとできないブラウザがあるので、
もしご覧いただけないようでしたら、
Google Chromeか Firefoxの最新版で確認してみてください。
続いて、サンプルコードの内容を確認します。
皆さんが星を書く時には、ひと筆書きで書くと思います。
やり方は同じです。 
ただ、パソコンに書いてもらうので、表現の方法が違います。
線の書き始める位置や終わりの位置を、x座標(横)、y座標(縦)で表現していきます。
それでは、手順に沿って解説します。
1．事前準備
まず、body要素内にcanvas要素を記述します。
canvas要素にid属性を記述し、特定できるようにしておきます。
次に、id属性を元に、どのcanvas要素に描画するか指定します。
document.getElementById('××') という命令です。
最後に、平面(2D)描画をするため準備をします。 getContext('2d') という命令です。
今回は平面ですが、今後は立体(3D)も出来るようになるかも知れないそうです。
2．スタート地点の決定
スタート地点をxとｙがともに0の位置に指定します。 beginPath() という命令です。
3.一筆書き
まず、一筆書きの開始地点へ移動します。 moveTo(x, y) という命令です。
次に、1本ずつ5本の線を引きます。 lineTo(x, y) という命令です。
最後に、一筆書きが終わったことを伝えます。 closePath() という命令です。
4.図形の塗りつぶし
塗りつぶす色を指定をします。 fillStyle = 'rgb(0, 0, 0)' という命令です。
図形を塗りつぶします。 fill() という命令です。
色を指定しないと、黒で塗りつぶされてしまいます。
命令の出し方は、それほど難しくなかったと思います。
ただ、HTMLで作ったというよりも、JavaScriptで作ったという印象が残ったと思います。
HTML5には、そのタグだけでは力を発揮しきれず、
CSSやJavaScriptを使わないと、そのタグ自体を活かせないというものがあるようです。
少しだけ変な感じがしますね。
昔に比べて、Webページに求められていることが複雑になってきていて、
HTMLだけでは対処しきれないということなのだと思います。
一つの技術だけはなく、色々な技術を組み合わせていかないと、
良いものは出来ないということですね。 
これから、どんどん新しい情報を紹介できたらと思っています。
以上、HTML5委員会でした。 
--------------------------------------------------------------------------------
パソコンスクール KENスクール蒲田校 Programインストラクター
http://www.kenschool.jp/school/kamata/index.html
KENスクールでJavaScriptを学びたい方は、Program講座へ！
http://www.kenschool.jp/Program/index.html
- 次の記事へ: IPアドレス
- 前の記事へ: Linuxで最初に覚えたいコマンド