HTML5 Canvas
canvas 要素は、web ページに図形を描くために使用します。
Canvas とは ?
HTML5の canvas 要素は、Web ページへグラフィックスを描画するために JavaScript を使用しています。
キャンバスは、矩形領域で、そのすべてのピクセルを制御します。
canvas 要素には、パス、ボックス、円、文字の描画と画像を追加するいくつかのメソッドがあります。
Canvas 要素の作成
HTML5 ページへ canvas 要素を追加します。
要素の id、width、height を指定します:
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript による描画
canvas 要素自身には、描画能力がありません。
すべての描画は、JavaScript 内で実行する必要があります:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Try it yourself »
JavaScriptは、canvas 要素を探すために id を使用します:
var c=document.getElementById("myCanvas");
次に、context オブジェクトを作成します:
var ctx=c.getContext("2d");
getContext("2d") オブジェクトは、パス、ボックス、円、文字、画像等を描くための多くの
メソッドを持っている組込みのHTML5オブジェクトです。
次の2行は、赤い矩形を描画します。:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
fillStyle メソッドは、赤色で塗潰し、fillRect メソッドは、
形状、位置、およびサイズを指定します。
座標を理解する
上記 fillRect メソッドは、パラメータ (0,0,150,75) を持っています。
この意味:左上隅 (0,0) から始まる、150x75 の長方形をキャンバスに描画します。
キャンバスの X 座標と Y 座標は、キャンバス上に図面を配置するために使用されます。
下の長方形の上にマウスをのせ、座標を見てください:
Canvas の追加例
以下は、Canvas 要素へ描画する追加の例です:
例 - グラデーション
指定した色のグラデーション付きの背景を描画します:
Try it yourself »
HTML5 <canvas> タグ
完全な Canvas 2d リファレンス
キャンバスオブジェクトで使用できるすべての属性とメソッドの完全なリファレンスは、
完全な Canvas 2d リファレンスを参照してください。
|
