Canvasによるグラフィック描画(1) (2/7)
作成:2010-07-15 09:50
更新:2010-07-15 09:50
更新:2010-07-15 09:50
■HTML5の基本的なコードを理解する
Canvasというのは、HTML5に用意されている「グラフィックを描画するための機能」です。これは、<canvas>というタグとして用意されています。このタグを埋め込むことで、そこにグラフィックを描くキャンバスという部品を配置できます。
といっても、これは「マウスで絵が描ける」というようなものではありません。配置したタグは、ただ何も無い無色透明な部品でしかありません。これに、JavaScriptを利用してさまざまな図形を描いていく、というわけです。
では、この<canvas>タグを埋め込んだHTMLページを用意しましょう。もちろん、これはHTML5のタグですから、HTML5の仕様にしたがってソースコードを書かないといけません。
下にあげたのが、そのごく簡単なサンプルです。この段階では、実際にブラウザからアクセスしても、タイトル以外は何も表示されません。
HTML5のソースコードは（XHTML的な書き方もありますけど）このように<!DOCTYPE html>というシンプルな<!DOCTYPE>を使って記述します。それ以降は、これまでのHTMLとそんなに極端に違いはありません。<meta>タグにcharsetの要素が増えた、というぐらいでしょうか。これは、今まで使われていた<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">という長ったらしい表記を置き換えるものです。（とはいえ、http-equivも引き続き使うことはできます）
で、肝心の<canvas>タグです。ここでは、ID、width、heightといった属性を指定して記述をしています。<canvas>タグはHTML5の新しい要素ですが、それ以外は別に新しいものはありませんね。これで、400×300のサイズでキャンバスが配置されます。
最後に、スクリプト関係についてです。ここでは、<script type="text/javascript" src="script.js" charset="UTF-8"></script>というタグを用意してあります。これで、「script.js」というスクリプトファイルをロードするようにしています。この後で、このスクリプトファイルを用意し、ここに描画の処理を用意しておこう、というわけです。
<body>には、onload="draw('canvas');"というのを用意してあります。これで、描画の処理を行わせるわけですね。つまり、script.js側にdrawという関数を用意し、引数で受け取ったIDの<canvas>に描画の処理を記述しておけばよい、というわけです。
といっても、これは「マウスで絵が描ける」というようなものではありません。配置したタグは、ただ何も無い無色透明な部品でしかありません。これに、JavaScriptを利用してさまざまな図形を描いていく、というわけです。
では、この<canvas>タグを埋め込んだHTMLページを用意しましょう。もちろん、これはHTML5のタグですから、HTML5の仕様にしたがってソースコードを書かないといけません。
下にあげたのが、そのごく簡単なサンプルです。この段階では、実際にブラウザからアクセスしても、タイトル以外は何も表示されません。
HTML5のソースコードは（XHTML的な書き方もありますけど）このように<!DOCTYPE html>というシンプルな<!DOCTYPE>を使って記述します。それ以降は、これまでのHTMLとそんなに極端に違いはありません。<meta>タグにcharsetの要素が増えた、というぐらいでしょうか。これは、今まで使われていた<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">という長ったらしい表記を置き換えるものです。（とはいえ、http-equivも引き続き使うことはできます）
で、肝心の<canvas>タグです。ここでは、ID、width、heightといった属性を指定して記述をしています。<canvas>タグはHTML5の新しい要素ですが、それ以外は別に新しいものはありませんね。これで、400×300のサイズでキャンバスが配置されます。
最後に、スクリプト関係についてです。ここでは、<script type="text/javascript" src="script.js" charset="UTF-8"></script>というタグを用意してあります。これで、「script.js」というスクリプトファイルをロードするようにしています。この後で、このスクリプトファイルを用意し、ここに描画の処理を用意しておこう、というわけです。
<body>には、onload="draw('canvas');"というのを用意してあります。これで、描画の処理を行わせるわけですね。つまり、script.js側にdrawという関数を用意し、引数で受け取ったIDの<canvas>に描画の処理を記述しておけばよい、というわけです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<script type="text/javascript" src="script.js"
charset="UTF-8"></script>
</head>
<body onload="draw('canvas');">
<h1>Canvas Sample</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る