Canvas tutorial:Basic usage
出典: MDC
目次 |
[編集] <canvas> 要素
<canvas> 要素自身を見ていくことからこのチュートリアルを始めましょう。
<canvas id="tutorial" width="150" height="150"></canvas>
この例は src と alt 属性を持っていないこと以外、ほとんど <img> 要素のように見えます。<canvas> 要素は width と height の二つの属性しかもちません。これらは共に任意で DOM プロパティか CSS ルールによっても設定できます。width と height 属性が定義されていない場合、横 300 ピクセル、縦150 ピクセル で初期化されます。
id 属性は <canvas> 要素特有では無く、(ほとんど)全ての HTML 属性に適用できる標準の HTML 属性です(例えば class のように)。常に id を付けることはスクリプトで <canvas> 要素の特定をとても簡単にするので良い考えです。
<canvas> 要素はどんな普通の要素のようにスタイル付けすることもできます(マージン、ボーダー、 背景等)。しかし、これらの規則はキャンバスの実際の描画には影響を与えません。 このチュートリアルで後で実際の描画を行う方法を見ます。スタイルが一切適用されない場合、canvas は完全な透明で初期化されます。
[編集] 代替内容
<canvas> 要素は紹介されたばかりで Firefox 1.0 と Internet Explorer を含む多くのブラウザで実装されていないため、ブラウザが要素を実装してない場合の代替内容を提供する方法が必要です。
幸運な事にこれはとても簡単です。私たちは代りの内容を canvas 要素の中に提供するだけです。サポートしていないブラウザは要素を完全に無視して代替内容を描画し、他のブラウザは普通に canvas のみを描画します。
例えば、canvas の内容についての文字の説明か動的に描画される内容についての静止画像を提供できます。これはこのようになります。
<canvas id="stockGraph" width="150" height="150"> 現在の株価: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150"/> </canvas>
注: 現在、Apple の実装は閉じ </canvas> タグを認識しないという点で仕様と異なっています。これは、Safariでは、すべての代替内容が表示されることを意味しています。 CSS を使うか代替内容を隠すためにスクリプトを使うことによって解決できます。
[編集] getContext
HTML ページを作ってそれを Firefox に読み込みさせると、<canvas> 要素の領域には何もないのが分かるでしょう。私たちは描き始めるための方法が必要です。それは getContextが提供します。 あらゆる canvas 要素は描画機能にアクセスするための getContext と呼ばれる DOM メソッドを持っています。 getContext は描画コンテクストという1つの引数しか取ることができません。現在、利用可能なコンテクストは 2D コンテクストの 1 つしかありません。将来は 3D コンテクストを使えるかもしれませんが、当分は 2D コンテクストで我慢しなければならないでしょう。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
最初の行では getElementById メソッドを使って DOM ノードを取り出しています。そして getContext メソッドを使って描画コンテクストにアクセスできます。
[編集] 未サポートのブラウザでの実行を防ぐ
代替内容のように、canvas をサポートしていないブラウザからスクリプトを実行する事を防ぐ方法が必要です。これは getContext メソッドをテストすることで容易にできます。 以上からコードの断片はこのようなものになります。
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// ここに描画コード
}
<canvas> をサポートしてないブラウザが実行をしないように全ての描画コードは if 文の中にあるべきです。
[編集] まとめ
すべてをまとめるなら、簡単な HTML テンプレートはこのようなものになります。私は後でこのチュートリアルで見ることになるすべての例にこのセットアップを使用します。
[編集] テンプレート
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
スクリプトをみると、私の作った draw 関数が呼ばれていることがわかるでしょう。それはページの読み込みが終了したときに一度実行されます(body タグの onload 属性経由)。この関数は setTimeout、 setInterval 、もしくはページが最初に読み込まれた後のどんなイベントハンドラ関数からも呼ぶことが出来ます。
これらは基礎です。 続くページで私たちは最終的にいくつか実際の描画を行います。